How to select a li with a specific class?

Question

<ul id="attached_deals_tab" class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#Test1">Test1</a>
  </li>
  <li class="">
    <a data-toggle="tab" href="#Test2">Test2</a>
  </li>
</ul>

With a jquery like this, I could say get me all list items:

$('#attached_deals_tab li');

But how can I say show me only the li that has class="active" ? In one line please.

I know how to negate it:

$('#attached_deals_tab li:not(.active)');

But not the other way around...

Melodee

This is a valid question, which I couldn't figure out. There is no reason to downvote this. It would be like saying nobody should ask questions and do tutorials instead. – Melodee

In SO, newbies are welcome i believe, we shouldn't ideally down-vote because of inexperience of the person asking the question. Instead, we should promote learning. – Osborne

@Osborne We should promote learning, yes. That's what I'm doing. Newbies are very welcome, I have helped a lot of them, but they should show some effort. I don't think "How can I set something to bold in CSS?" type of questions are welcome. – Pithead

Note: none of the answers care about the possibility that lists can be nested, the nested lists can have more lis that might have the class active. That can lead to surprises :). – Pithead

@bažmegakapa Thats ridiculous. Where did I not show any effort? I have shown the combinations I have tried, which didn't succeed. You downvote a question that shows no code or nor any effort. If you don't want to help, just stay out of it and leave others help. No need for non-constructive down-votes. And again if you think none of the answers are so great, then answer properly instead of showing off in the comment section. – Melodee

@Kave I expressed my opinion (a downvote is a way to do that), you expressed yours. I want to help, that's why I did what I did. – Pithead

@Kave - As bažmegakapa pointed out, the answers dont take nesting into consideration. Use #attached_deals_tab > li.active for filtering immediate children only. – Osborne

Answer 1

$('#attached_deals_tab li.active');

Griz

For more efficiency, you can also use $('#attached_deals_tab').find('li.active'); – Hazem

Answer 2

This should do it, the syntax is just the same as in CSS:

$('#attached_deals_tab li.active');

Breadbasket

Answer 3

You could just use the class once the ul id has been specified:

$("#attached_deals_tab .active");

Unless you have something other than lis in there and that something is also being applied the active class, which would be strange.

Raji

Answer 4

Simple, do

$('#attached_deals_tab li.active').(...)

Wondawonder

This has the potential to select more than just li elements – Griz

Okay, then I can make it li.active. – Wondawonder

Answer 5

You should use the child selector to prepare your code for possible future nested lists:

$('#attached_deals_tab > .active')

It will select only direct children. According to the specification, an ul can only have li elements as its children, so when using the child selector, .active should suffice, no need to specify li.active.

By nested lists, I mean something like this:

<ul id="attached_deals_tab">
    <li class="active"></li>
    <li></li>
    <li>
        <ul>
            <li class="active"></li>
            <li></li>
        </ul>
    </li>
</ul>

Reading the documentation on jQuery Selectors will also help a lot.

Pithead

Could the downvoter explain his reasons (other than being sooo hurt)? I am always happy to improve my answers. – Pithead