jQuery target only li tags where a element have a certain class

Question

Is there a way to target only li elements where the a tag has a specific class?

for example:

<li> <a href="#" class="mobile-only">link</a> </li>
<li> <a href="#" class="other-class">link</a> </li>

Can I just target the li where a has class "mobile-only"?

Possible duplicate of [Css class selector](http://stackoverflow.com/questions/10794610/css-class-selector) — Jorel Amthor, Feb 26 '16 at 13:44

score 6 · Accepted Answer · edited May 23 '17 at 12:07

6

you can access the parent of anchor tag with class mobile-only

$( "a.mobile-only" ).parent();

or you can use parent pseudo selector, but there are performance concerns

li a:parent { background: none; }

js Code $( "li a:parent" )

li:has(a.mobile-only) { background: none; }

js Code $( "li:has(a.mobile-only)" )

edited May 23 '17 at 12:07

Community

answered Feb 26 '16 at 13:40

gurvinder372

`$( "li:has(a.mobile-only)")` This will work. No need to complex the selector by specifying child selector. – Rajaprabhu Aravindasamy Feb 26 '16 at 13:48
@RajaprabhuAravindasamy sure, will make the change. – gurvinder372 Feb 26 '16 at 13:48
https://jsfiddle.net/x0rayv1f/ Jquery version is working, but css version is not working. https://jsfiddle.net/x0rayv1f/2/ Can you tell the reason why? – Rajaprabhu Aravindasamy Feb 26 '16 at 13:51
@RajaprabhuAravindasamy which version of browser you are using, can you run this and let me know http://css4-selectors.com/browser-selector-test/ – gurvinder372 Feb 26 '16 at 13:57
`chrome 48.0.2564.116 m` The most recent one. Is it working for you? – Rajaprabhu Aravindasamy Feb 26 '16 at 13:59
@RajaprabhuAravindasamy No, and that site is telling that my version (43) doesn't support this yet. – gurvinder372 Feb 26 '16 at 14:00
Thank you for support...your answer solved my issue. – Florin Simion Feb 26 '16 at 14:39

score 0 · Answer 2 · answered Feb 26 '16 at 13:41

0

This is very easy to do with jQuery.

Just do:

$("a.mobile-only").parents("li")

answered Feb 26 '16 at 13:41

Sarhanis

Can I just target the `li` where `a` has class "mobile-only"? – Jamie Harding Feb 26 '16 at 13:43
$("li.mobile-only") will search for

1

`.parent()` would be more appropriate here than `.parents()`. – Daniel Beck Feb 26 '16 at 13:45

@DanielBeck is right as this may be nested within other `li`'s – Jamie Harding Feb 26 '16 at 13:46

parent() is more appropriate if you're sure that the li is the direct parent. Otherwise parents() is better. – Sarhanis Feb 26 '16 at 13:47

Arpit · Answer 3 · 2016-02-26T13:49:18.313

-1

$('a.mobile-only').parent("li")

edited Feb 26 '16 at 13:49

answered Feb 26 '16 at 13:44

Arpit

That would make the current selection the `a` and not the `li` – Jamie Harding Feb 26 '16 at 13:45
@JamieSterling:yeah,my bad.Corrected the answer – Arpit Feb 26 '16 at 13:49

3 Answers3