Question

我有一个HTML，如下所示

<div class="t1t2Wrapper" style="padding:0px 10px 0px">
   <ul class="breadcrumb pull-left" id="mybreadcumb" style="background:none; margin-bottom:0px;">
      <li>PQR<i class="icon-angle-right"></i></li>
      <li>Burger<i></i></li>
   </ul>
   <label class="pull-right" style="padding:8px;"><label>Brand Name</label>None</label>
</div>

var ids = [];
    $('.breadcrumb').each(function () {
        ids.push($(this).find('li').text());
    })

    alert(ids);

如何创建数组

PQR，汉堡

http://jsfiddle.net/6kb7dhwq/2/

Answer 1

您需要解析li代码以及ul代码......

http://jsfiddle.net/6kb7dhwq/5/

var ids = [];
$('.breadcrumb li').each(function () {
    ids.push($(this).text());
})

alert(ids);

您之前所做的只是获取了子li标记中的所有文本，并将其连接起来。这会将它们视为单独的元素，因此会推动每一段文本。

Answer 2

你需要迭代孩子，而不是UL：

var ids = [];
$('.breadcrumb').children('li').each(function () {

    ids.push($(this).text());
})

alert(ids);

http://jsfiddle.net/6kb7dhwq/4/

Answer 3

在您的选择器中，如果您使用了'.breadcrumb > li'或'.breadcrumb li'代替'.breadcrumb'，那么您的代码就可以正常使用。但是，我想分享另一种方法。

您可以按如下方式使用.map：

var ids = $('.breadcrumb > li').map(function() {
    return $(this).text();
}).get();

＆＃13;

    var ids = $('.breadcrumb > li').map(function() {
        return $(this).text();
    }).get();

alert( ids )

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="t1t2Wrapper" style="padding:0px 10px 0px">
   <ul class="breadcrumb pull-left" id="mybreadcumb" style="background:none; margin-bottom:0px;">
      <li>PQR<i class="icon-angle-right"></i></li>
      <li>Burger<i></i></li>
   </ul>
   <label class="pull-right" style="padding:8px;"><label>Brand Name</label>None</label>
</div>

＆＃13;

Answer 4

演示：http://jsfiddle.net/6kb7dhwq/7/

var ids = [];
$('.breadcrumb li').each(function () {        
   ids.push($(this).text());
})

Answer 5

您需要获取li项而不是ul，然后使用.each（）函数迭代每个li。示例如下：

$('.breadcrumb li').each(function () {
    ids.push($(this).text());
})

解析ul标签并根据li标签数据形成一个数组

5 个答案: