CODEWITHSUNDEEP
javascriptjqueryhtml
Abhishek Ginani
Abhishek Ginani

Reputation: 4751

Find li element by inner text of inside span

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?

Upvotes: 2

Views: 1405

Answers (2)

AndrewL64
AndrewL64

Reputation: 16301

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>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 6

Related Questions