CODEWITHSUNDEEP
javascriptjqueryhtml
Mike Vinyl
Mike Vinyl

Reputation: 97

Find id of element without class inside a specific element children

If I have this html code:

<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>

As you see there are two <li> elements with the inactive class.

I tried to do this and I have

$("#tabs").children();

But how can I search the specific <li> without class inactive?

Thanks for any help

Upvotes: 2

Views: 101

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use :not() and :has() pseudo-class selectors.

$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");


console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
  <li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
  </li>
  <li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
  </li>
  <li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
  </li>

UPDATE 1 : Or without using jQuery :has() instead using parent() method.

$("#tabs > li > :not(.inactive)").parent()


console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
  <li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
  </li>
  <li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
  </li>
  <li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
  </li>

UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.

$("#tabs > li > :not(.inactive)")


$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
  <li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
  </li>
  <li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
  </li>
  <li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
  </li>

Upvotes: 2

black_pottery_beauty
black_pottery_beauty

Reputation: 879

By using javascript we can complete this way:-

var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)

Jsfiddle link

Upvotes: 1

Annas Rafique
Annas Rafique

Reputation: 60

You can use following code

$('ul#list li:not([class])')

in your case [class] will be inactive

Upvotes: 1

guradio
guradio

Reputation: 15555

$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
  <li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
  </li>
  <li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
  </li>
  <li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
  </li>
</ul>

Use method .not()

Description: Remove elements from the set of matched elements.

Upvotes: 2

MatiK
MatiK

Reputation: 573

You can use .not() function $("#tabs").find('a').not('.inactive');

Upvotes: 1

Related Questions