Question

我需要jquery遍历每个div，但只计算其内部各个div的li的数量，然后为每个div输出数字li。

问题是它遍历所有这些，但收集p标签中的所有信息，并显示它。而不只是每种颜色。

这是一个代码，以展示它。

＆＃13;

PS D:\PShell> .\run.ps1 -runParam -silent ### declared parameter type is string
-silent
PS D:\PShell> .\run.ps1 `-silent          ### escape: a backtick character
-silent
PS D:\PShell> .\run.ps1 '-silent'         ### escape: single quotes
-silent
PS D:\PShell> .\run.ps1 "-silent"         ### escape: double quotes
-silent

＆＃13;

$(document).ready(function() {
  $(".wrapper>ul>li").each(function() {
    var numItems = $('.color').length;
    $("#numberofitems").html(numItems);
    $("#numberofitems").append(" Colors");
  });
});

＆＃13;

Answer 1

当你需要遍历div时，你正在循环遍历列表项。您也无法重复使用ID，因此请改用类：

$(document).ready(function() {
  $(".wrapper").each(function() {
    $(this).find(".numberofitems").html($(this).find('.color').length + " Colors");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li class="color">Color 1</li>
    <li class="color">Color 2</li>
    <li class="color">Color 3</li>
    <li class="color">Color 4</li>
  </ul>
  <p class="numberofitems"></p>
  <!-- Output 4 COLORS here -->
</div>
<div class="wrapper">
  <ul>
    <li class="color">Color 1</li>
    <li class="color">Color 2</li>
    <li class="color">Color 3</li>
    <li class="color">Color 4</li>
    <li class="color">Color 5</li>
  </ul>
  <p class="numberofitems"></p>
  <!-- Output 5 COLORS here -->
</div>

Answer 2

注意id s应该是唯一的。这就是我改变的原因，

<p id="numberofitems"></p>

到

<p class="numberofitems"></p>

参见代码中的解释注释

$(document).ready(function() {
  $(".wrapper").each(function() { // loop trough the wrappers
    // $(this) is the wrapper
    var numItems = $(this).find('.color').length; // count the colors inside this wrapper
    $(this).find('.numberofitems').html('Output ' + numItems + ' COLORS here'); // add the number inside this wrapper to numberofitems
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li class="color">Color 1</li>
    <li class="color">Color 2</li>
    <li class="color">Color 3</li>
    <li class="color">Color 4</li>
  </ul>
  <p class="numberofitems"></p>
</div>
<div class="wrapper">
  <ul>
    <li class="color">Color 1</li>
    <li class="color">Color 2</li>
    <li class="color">Color 3</li>
    <li class="color">Color 4</li>
    <li class="color">Color 5</li>
  </ul>
  <p class="numberofitems"></p>
</div>

如何让jquery显示每个li的计数并输出数字

2 个答案: