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

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

3 Answers 3

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

});