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

77 Answered Questions

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

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1101977 View
  • 2264 Score
  • 77 Answer
  • Tags:   javascript jquery

79 Answered Questions

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

  • 2011-04-23 22:17:18
  • Walker
  • 5784299 View
  • 7214 Score
  • 79 Answer
  • Tags:   javascript arrays

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2239051 View
  • 2103 Score
  • 29 Answer
  • Tags:   javascript jquery

54 Answered Questions

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

43 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

24 Answered Questions

[SOLVED] Creating a div element in jQuery

23 Answered Questions

[SOLVED] Event binding on dynamically created elements?

31 Answered Questions

14 Answered Questions

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

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1005952 View
  • 1561 Score
  • 14 Answer
  • Tags:   javascript jquery html

11 Answered Questions

Sponsored Content