By Abhishek Ginani


2019-01-11 11:36:01 8 Comments

I have HTML like below

<ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0">
   <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>

</ul>

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?

2 comments

@AndrewL64 2019-01-11 12:04:26

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");
<!-- HTML -->

<ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0">
   <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>

</ul>

@Rory McCrossan 2019-01-11 11:39:15

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');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0">
  <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Automobile&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Router&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Smart City Sensor&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      ZigBee Power Cable&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Tracker&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Fleet Intelligence&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Mobile&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Double Door&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Test&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>

</ul>

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');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0">
  <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Automobile&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Router&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Smart City Sensor&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      ZigBee Power Cable&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Tracker&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Fleet Intelligence&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Mobile&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Double Door&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>
  <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10">
    <span class="k-loading k-complete"></span>
    <span unselectable="on" class="k-link"> 
      Test&nbsp;&nbsp;&nbsp;
      <span class="fa fa-ellipsis-v"></span>
    </span>
  </li>

</ul>

Related Questions

Sponsored Content

31 Answered Questions

39 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

72 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5393374 View
  • 6715 Score
  • 72 Answer
  • Tags:   javascript arrays

26 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2105148 View
  • 1995 Score
  • 26 Answer
  • Tags:   javascript jquery

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

75 Answered Questions

[SOLVED] How do I detect a click outside an element?

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1042212 View
  • 2152 Score
  • 75 Answer
  • Tags:   javascript jquery

11 Answered Questions

13 Answered Questions

[SOLVED] How to move an element into another element?

23 Answered Questions

[SOLVED] Event binding on dynamically created elements?

26 Answered Questions

[SOLVED] Creating a div element in jQuery

Sponsored Content