如何循环查找元素中的特定文本？

Question

I am working on the following demo. Why am I not able to find and filter divs bases on their text?

 $(".list-group-item").each(function(){ if($(this':contains("text")').contains("Map")){ $(this).append(" - One"); } if($(this':contains("text")').contains("Tap")){ $(this).append(" - Two"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-group"> <li class="list-group-item">Map</li> <li class="list-group-item">App</li> <li class="list-group-item">Tap</li> <li class="list-group-item">Map</li> <li class="list-group-item">Wap</li> </ul>

Answer 1

your syntax $(this':contains("text")' is incorrect, try using is , like:

$(".list-group-item").each(function(){
    if($(this).is(':contains("Map")')) {
        $(this).append(" - One");
    }
    if($(this).is(':contains("Tap")')) {
        $(this).append(" - Two");
    }
});

Answer 2

you may missed concat(+) between this :contains

$(".list-group-item").each(function(){
       if($(this + ':contains("text")').contains("Map")){
          $(this).append(" - One");
       }
       if($(this + ':contains("text")').contains("Tap")){
          $(this).append(" - Two");
       }
});

Answer 3

try changing it as below

 $(".list-group-item").each(function(){
       if($(this).text() == "Map"){
          $(this).append(" - One");
       }
       if($(this).text() == "Tap"){
          $(this).append(" - Two");
       }
});

Answer 4

You don't need to loop using $.each() . You can directly select and append. Eg:

 $('.list-group-item:contains("Map")').append(" - One"); $('.list-group-item:contains("Tap")').append(" - Two"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-group"> <li class="list-group-item">Map</li> <li class="list-group-item">App</li> <li class="list-group-item">Tap</li> <li class="list-group-item">Map</li> <li class="list-group-item">Wap</li> </ul>