合併列表項文本，同時保持使用jQuery

Question

相同的順序我有兩個數組：

<ul id="titles"> 
    <li>title 1</li> 
    <li>title 2</li> 
</ul> 

和

<ul id="descs"> 
    <li>desc 1</li> 
    <li>desc 2</li> 
</ul> 

我在尋找的結果：

<ul id="titles"> 
    <li>title 1 <span>desc 1</span></li> 
    <li>title 2 <span>desc 2</span></li> 
</ul> 

我正在使用的代碼：

var li_D = $('#descs li').map(function() { 
    return $(this).text(); 
}).get(); 
var li_T = $('#titles li').append(function(){ 
    return"<span>"+li_D+"</span>" 
}); 

但它返回這個結果：

<ul id="titles"> 
    <li>title 1<span>desc 1,desc 2</span></li> 
    <li>title 2<span>desc 1,desc 2</span></li> 
</ul> 

JSfiddle

如何合併來自每個UL列表項獲得其描述每個標題？

Answer 1

使用.html(function)更改每一個li的html。在#descs中使用.eq()函數獲取相關元素的文本的回調。

$('#titles li').html(function(i, html) { 
 
    return html + " <span>"+ $("#descs li").eq(i).text() +"</span>"; 
 
});

#titles span {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="titles"> 
 
    <li>title 1</li> 
 
    <li>title 2</li> 
 
</ul> 
 
<ul id="descs"> 
 
    <li>desc 1</li> 
 
    <li>desc 2</li> 
 
</ul>