jquery - 在jQuery中创建第n个li的字符串

Question

如何创建每个 3rd li 的字符串，导致

black,red,blue

由此：

<div id="container">
    <ul>
        <li>shirt</li>
        <li>x-large</li>
        <li>black</li>
        <li>9.99</li>
    </ul>
    <ul>
        <li>pants</li>
        <li>large</li>
        <li>red</li>
        <li>19.99</li>
    </ul>
    <ul>
        <li>shoes</li>
        <li>medium</li>
        <li>blue</li>
        <li>9.99</li>
    </ul>
</div>

Answer 1

尝试如下，

$(function () {
   var result = [];
   $('#container ul').find('li:eq(2)').each(function () {
      result.push($(this).text());
   });

   result.join();

});

演示：http: //jsfiddle.net/BxJbH/

Answer 2

您可以使用nth-child(3)来获取所有第三个孩子的元素：

var colors = [];
$("#container").find('li:nth-child(3)').text(function (_, text) {
    colors.push(text);
});
console.log(colors.join(','));

http://jsfiddle.net/ExplosionPIlls/CfrWX/1/

Answer 3

+=您可以使用数组来连接字符串，而不是使用数组：

myString = "";
$('ul li:nth-child(3)').each(function(){
    myString += ","+$(this).text();
})
console.log(myString.substring(1));
// returns 'black,red,blue'

http://jsfiddle.net/phtMx/

Answer 4

var concatenated = $.map($('li:nth-child(3)'), function(a, i) {
    return $(a).html();
}).join(',')

Answer 5

就像其他答案所说，使用nth-child选择器：

$(function(){
    var strings = $('#container').find('li:nth-child(3)').map(function(){
        return $(this).text();
    }).get().join(', ');
    $('#result').text(strings);
});

演示 - http://jsbin.com/efavor/2/edit