javascript - Count number of list items with JS - Stack Overflow

admin管理员组

文章数量:1431762

Can someone have a look at my code and tell me what the problem is?

I am trying to build a jquery function that counts all list item elements that contains a specific text. The bit where it should count all "li"s works:

$(allLip).text(allLi.length);

but the function where is is supposed to count all "li"s with a specific text doesn't work.

Is there any way that I can achieve this with pure JS?

Thanks in advance.

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);
        }
        
    });

<script src=".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>

Can someone have a look at my code and tell me what the problem is?

I am trying to build a jquery function that counts all list item elements that contains a specific text. The bit where it should count all "li"s works:

$(allLip).text(allLi.length);

but the function where is is supposed to count all "li"s with a specific text doesn't work.

Is there any way that I can achieve this with pure JS?

Thanks in advance.

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);
        }
        
    });

<script src="https://ajax.googleapis./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>

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 16, 2018 at 4:47 Mustafa_hdMustafa_hd 14911 silver badge77 bronze badges 1

• Do like $(allLi).text().match(new RegExp(pText)) instead. – StackSlave Commented Mar 16, 2018 at 5:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

There is no need for a loop, you can simply use jQuery :contains selector with filter() method.

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);

<script src="https://ajax.googleapis./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>

When you are looping thru the items, you need to pass the current element in the loop and evaluate it (you are currently evaluating all the items in every loop)

See demo below:

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);

<script src="https://ajax.googleapis./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>

Hope this one will help you.

$(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]);

});

本文标签： javascriptCount number of list items with JSStack Overflow