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

76 Answered Questions

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

  • 2011-04-23 22:17:18
  • Walker
  • 5581239 View
  • 6918 Score
  • 76 Answer
  • Tags:   javascript arrays

39 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

76 Answered Questions

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

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1065217 View
  • 2198 Score
  • 76 Answer
  • Tags:   javascript jquery

23 Answered Questions

[SOLVED] Event binding on dynamically created elements?

14 Answered Questions

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

27 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2157717 View
  • 2030 Score
  • 27 Answer
  • Tags:   javascript jquery

31 Answered Questions

53 Answered Questions

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

11 Answered Questions

24 Answered Questions

[SOLVED] Creating a div element in jQuery

Sponsored Content