Find li element by inner text of inside span

Question

I have HTML like below


    Automobile   
    Router   
    Smart City Sensor   
    ZigBee Power Cable   
    Tracker   
    Fleet Intelligence   
    Mobile   
    Double Door   
    Test

I am trying to find the li element by the inner text of inside span element.

Eg: Router has the li element id - tab_1

I tried using following jquery code but it's not working and returning empty

$('li.k-item tabClick k-state-default span.k-link:contains("Router")');

Is there any other way to get this?

user_519413 · Answer

The issue is with your selector. You have spaces between the k-item tabClick k-state-default classes, where they should be joined together with period delimiters for the class selector prefix. This will then select the span. To get the li from this you can use closest():

var $span = $('li.k-item.tabClick.k-state-default span.k-link:contains("Router")');

var $li = $span.closest('li');
$li.css('color', '#C00');



  
    
     
      Automobile   
      
    
  
  
    
     
      Router   
      
    
  
  
    
     
      Smart City Sensor   
      
    
  
  
    
     
      ZigBee Power Cable   
      
    
  
  
    
     
      Tracker   
      
    
  
  
    
     
      Fleet Intelligence   
      
    
  
  
    
     
      Mobile   
      
    
  
  
    
     
      Double Door   
      
    
  
  
    
     
      Test

As an alternative to avoid closest() you could use :has to directly select the li:

var $li = $('li.k-item.tabClick.k-state-default:has(span.k-link:contains("Router"))');
$li.css('color', '#C00');



  
    
     
      Automobile   
      
    
  
  
    
     
      Router   
      
    
  
  
    
     
      Smart City Sensor   
      
    
  
  
    
     
      ZigBee Power Cable   
      
    
  
  
    
     
      Tracker   
      
    
  
  
    
     
      Fleet Intelligence   
      
    
  
  
    
     
      Mobile   
      
    
  
  
    
     
      Double Door   
      
    
  
  
    
     
      Test

user_4114907 · Answer

If you are interested in a Pure JavaScript approach, you can use the textContent property to retrieve the text from inside each li element and then use the indexOf() method to check if the element's text contains the string or not.

var x = document.querySelectorAll(".k-item.tabClick.k-state-default");

x.forEach(li => {
  if(li.textContent.indexOf("Router") != -1){
    li.style.color = "red";
    return li;
  }
});

You can make a re-usable function say, checkText() for checking different strings too by just passing a string as a parameter and comparing each element's text content with that string instead.

Check and run the Code Snippet below for a practical example of this reusable function:

/* JavaScript */

var x = document.querySelectorAll(".k-item.tabClick.k-state-default");

function checkText(e) {
  x.forEach(li => {
    if(li.textContent.indexOf(e) != -1){
      console.log(e + " is found and has been marked red!!");
      li.style.color = "red";
      return li;
    }
  });
}

checkText("Router");
checkText("Mobile");




    Automobile   
    Router   
    Smart City Sensor   
    ZigBee Power Cable   
    Tracker   
    Fleet Intelligence   
    Mobile   
    Double Door   
    Test

Find li element by inner text of inside span

2 Answers