我有两个数组:
<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>
如何合并每个 ul 中的列表项以获得每个标题及其描述?
最佳答案
使用.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>
关于javascript - 使用 jquery 合并列表项的文本,同时保持相同的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43171507/