Jquery: select an element when two or more conditions are true

Question

I have an element like this

 <ul>
  <li data-ud="321" data-id="42">
  <li data-ud="322" data-id="42">
  <li data-ud="323" data-id="42">
  <li data-ud="324" data-id="42">

  <li data-ud="321" data-id="43">
  <li data-ud="322" data-id="43">
  <li data-ud="323" data-id="43">
  <li data-ud="324" data-id="43">

  <li data-ud="321" data-id="44">
  <li data-ud="322" data-id="44">
  <li data-ud="323" data-id="44">
  <li data-ud="324" data-id="44">

  <li data-ud="321" data-id="45">
  <li data-ud="322" data-id="45">
  <li data-ud="323" data-id="45">
  <li data-ud="324" data-id="45">

 </ul>

Now I want to select a element with data-id=45 and data-ud=322. I have tried but it didn't work.

Thanks in advance

can you show what you have tried that didnt work maybe we can help with that — guradio, May 10 '16 at 10:42

score 5 · Accepted Answer · answered May 10 '16 at 10:59

To use 'and' in a selector, simply don't use any other separator, eg a li and class myclass would be:

li.myclass

to find by attribute, use [attribute=x], so to combine the two:

li[data-id=45][data-ud=322]

or, with jquery:

$("li[data-id=45][data-ud=322]")

This can be difficult to read and prone to errors eg a space between the two [][] will give a totally different result, so you can instead use filter to the same effect:

$("li").filter("[data-id=45]").filter("[data-ud=322]")

Fiddle example: https://jsfiddle.net/o9fdhphf/

thanks bro for you detailed explanation and examples – scriptkiddie May 10 '16 at 11:08 — scriptkiddie, May 10 '16 at 11:08

score 2 · Answer 2 · answered May 10 '16 at 10:45

2

Try the following:

$('li[data-id=45][data-ud=322 ]');

answered May 10 '16 at 10:45

rajthakur

443
6
16

Jenson M John · Answer 3 · 2016-05-10T11:03:58.840

0

$("[data-ud=322][data-id=45]").text()

OR

$("[data-ud=321] + [data-id=45]").text()

JSFiddle

edited May 10 '16 at 11:03

answered May 10 '16 at 11:01

Jenson M John

5,499
5
30
46

2

Did you check your fiddle? – freedomn-m May 10 '16 at 11:02
@freedomn-m Sorry, Updated..Thankx!! – Jenson M John May 10 '16 at 11:04
1

http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean `[ud=321] + [id=45]` gives the element with id=45 that comes *after* ud=321, not that has both ud=321 and id=45 (ie it might have a different ud) – freedomn-m May 10 '16 at 13:00

Jquery: select an element when two or more conditions are true

3 Answers3

Linked