Question

我正在试图弄清楚如何分别获取或计算每个元素中的项目。这是下面的代码，向您展示我的问题。

在这里你可以看到我有一个包含不同项目的列表元素。现在，如果我想分别获取每个元素的项目数，然后将它们存储在变量中，以便我可以使用该值。

jquery .length获取项目数量但是它们全部加起来。向元素添加一个类可以解决这个问题，但是我可以通过编程方式执行此操作。

我正在构建一个滑块，它将根据元素内的项目数应用宽度。

因此，如果幻灯片有3个项目宽度为20px，那么幻灯片的总宽度将为60px

如果第二张幻灯片有5个项目，则它总计为100px。

var count = $('.list li').length;

console.log(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="list">
    <li>One</li>
    <li>Two</li>
</ul>

Answer 1

您需要使用list迭代.each()，然后检查每个列表的内容，如下所示：

var lengths = [];
$('.list').each(function() {
  var items = $(this).find('li');
  console.log(items.length);
  lengths.push(items.length); // gather into lengths variable
});
console.log("lengths = [" + lengths + "]");
// You can now use lengths[i] as desired.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul class="list">
  <li>One</li>
  <li>Two</li>
</ul>

Answer 2

使用.eq（）方法并查找长度。

var count = $('.list').eq(0).find('li').length;
var count1 = $('.list').eq(1).find('li').length;
console.log(count +'-------'+count1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="list">
    <li>One</li>
    <li>Two</li>
</ul>

Answer 3

试试这个

jQuery( "ul.list" ).each(function( index ) {
            console.log(jQuery(this).children().length);
        });

Answer 4

您可以使用jQuery.map()获取所有SEQUENCE OF中result和index个count元素的对象数组li }：

＆＃13;

ul.lists

＆＃13;

var result = $.map($('ul.list'), function(el, index) {
  return {
    index: index,
    count: $(el).find('li').length
  };
});

console.log(result);

＆＃13;

Answer 5

我的方法有点不同。我会将所有列表的长度存储在一个数组中，并在我希望的时候使用它。

var list = new Array();
$('.list').each(function(){
    list.push($(this).children().length);
});

分别计算每个元素内的项目

5 个答案: