javascript - 使用 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 )改变每一里的 html。在函数的回调中，使用 .eq() 在 #descs 中获取相关元素的文本.

$('#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>