Question

有人可以查看我的代码并告诉我问题是什么吗？

我正在尝试构建一个jquery函数，该函数计算包含特定文本的所有列表项元素。应该计算所有＆＃34; li＆＃34; s的位：

$（allLip）的.text（allLi.length）;

但是功能在哪里应该计算所有具有特定文本的＆＃34; li＆＃34; s。

有没有办法用纯JS实现这个目标？

提前致谢。

＆＃13;

var allLi = $("#lists ol li");
    
    var allLip = $("#all-li");
    var numP = $("#num-p");
    var numS = $("#num-s");
    var numP12 = $("#num-p-12");
    
    
    var pText = "(p)";
    var sText = "(s)";
    var p12Text = "(p-12)"
    
    
    
    
    
    $(allLip).text(allLi.length);
    
    $(allLi).each(function(){
        var pCounter = 0;
        var sCounter = 0;
        var p12Counter = 0;
        
        if($(allLi).has(pText)){
            pCounter++;
            $(numP).text(pCounter);
        }
        if($(allLi).has(sText)){
            sCounter++;
            $(numS).text(sCounter);
        }
        if($(allLi).has(p12Text)){
            p12Counter++;
            $(numP12).text(p12Counter);
        }
        
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lists">
    
    <ol>
        <li>list 1 - (p)</li>
        <li>list 2 - (s)</li>
        <li>list 3 - (p-12)</li>
        <li>list 4 - (p)</li>
        <li>list 5 - (p)</li>
        <li>list 6 - (s)</li>
        <li>list 7 - (p-12)</li>
        <li>list 8 - (p-12)</li>
    </ol>
    
</div>




<!-- How many "li" -->
<p id="all-li"></p>

<!-- How many "li" with "(p)" text-->
<p id="num-p"></p>

<!-- How many "li" with "(s)" text-->
<p id="num-s"></p>

<!-- How many "li" with "(p-12)" text-->
<p id="num-p-12"></p>

＆＃13;

Answer 1

不需要循环，只需使用jQuery :contains选择器和filter()方法。

＆＃13;

var allLi = $("#lists ol li");
var allLip = $("#all-li");
var numP = $("#num-p");
var numS = $("#num-s");
var numP12 = $("#num-p-12");


var pText = "(p)";
var sText = "(s)";
var p12Text = "(p-12)"





allLip.text(allLi.length);
numP.text(allLi.filter(':contains("' + pText + '")').length);
numS.text(allLi.filter(':contains("' + sText + '")').length);
numP12.text(allLi.filter(':contains("' + p12Text + '")').length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lists">
  <ol>
    <li>list 1 - (p)</li>
    <li>list 2 - (s)</li>
    <li>list 3 - (p-12)</li>
    <li>list 4 - (p)</li>
    <li>list 5 - (p)</li>
    <li>list 6 - (s)</li>
    <li>list 7 - (p-12)</li>
    <li>list 8 - (p-12)</li>
  </ol>
</div>




<!-- How many "li" -->
<p id="all-li"></p>
<!-- How many "li" with "(p)" text-->
<p id="num-p"></p>
<!-- How many "li" with "(s)" text-->
<p id="num-s"></p>
<!-- How many "li" with "(p-12)" text-->
<p id="num-p-12"></p>

＆＃13;

Answer 2

当您循环遍历项目时，需要在循环中传递当前元素并对其进行评估（您当前正在评估每个循环中的所有项目）

见下面的演示：

＆＃13;

var allLi = $("#lists ol li");

var allLip = $("#all-li");
var numP = $("#num-p");
var numS = $("#num-s");
var numP12 = $("#num-p-12");
var pText = "(p)";
var sText = "(s)";
var p12Text = "(p-12)"

// get all LI elements
$(allLip).text(allLi.length);

// init counters
var pCounter = 0;
var sCounter = 0;
var p12Counter = 0;

// loop thru LI items
$(allLi).each(function(idx, liItem) {
  // if the item has the pText, count it
  if ($(liItem).text().indexOf(pText) != -1) {
    pCounter++;
  }

  // if the item has the sText, count it
  if ($(liItem).text().indexOf(sText) != -1) {
    sCounter++;
  }
  
  // if the item has the p12Text, count it
  if ($(liItem).text().indexOf(p12Text) != -1) {
    p12Counter++;
  }
});

// display results
$(numP).text(pCounter);
$(numP12).text(p12Counter);
$(numS).text(sCounter);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lists">
  <ol>
    <li>list 1 - (p)</li>
    <li>list 2 - (s)</li>
    <li>list 3 - (p-12)</li>
    <li>list 4 - (p)</li>
    <li>list 5 - (p)</li>
    <li>list 6 - (s)</li>
    <li>list 7 - (p-12)</li>
    <li>list 8 - (p-12)</li>
  </ol>
</div>

<!-- How many "li" -->
LIs: <span id="all-li"></span>
<br/>

<!-- How many "li" with "(p)" text-->
LIs w/P: <span id="num-p"></span>
<br/>

<!-- How many "li" with "(s)" text-->
LIs w/S: <span id="num-s"></span>
<br/>

<!-- How many "li" with "(p-12)" text-->
LIs w/P-12: <span id="num-p-12"></span>

＆＃13;

Answer 3

希望这个人会帮助你。

$(document).ready(function () {
    var allLip = $("#all-li");
    var numP = $("#num-p");
    var numS = $("#num-s");
    var numP12 = $("#num-p-12");

    var pText = "(p)";
    var sText = "(s)";
    var p12Text = "(p-12)"
    var allLi = 'li';


    $(allLip).text($(allLi).length);
    var pCounter = 0;
    var sCounter = 0;
    var p12Counter = 0;
    var params = [pCounter, sCounter, p12Counter];
    $(allLi).each(function () {
        if ($(this).is(':contains("' + pText + '")')) {
            params[0]++;
        }
        if ($(this).is(':contains("' + sText + '")')) {
            params[1]++;
        }
        if ($(this).is(':contains("' + p12Text + '")')) {
            params[2]++;
        }

    }, params);
    $(numP).text(params[0]);
    $(numS).text(params[1]);
    $(numP12).text(params[2]);

});

使用JS计算列表项的数量

3 个答案: