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。在函数的回调中使用.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>

合并列表项的文本，同时使用jquery保持相同的顺序

1 个答案: