AND/OR Conditions in jQuery

Question

In jQuery space denotes AND condition "," denotes OR condition, Is that right? But I am facing issues in that. Here is my sample html code

<td id="4">
    <div id="test1" class="test1"></div>
    <div id="test2" class="test2"></div>
</td>
<td id="5">
    <div id="test1" class="test1"></div>
    <div id="test2" class="test2"></div>
</td>

If I use the following query, it works

jQuery('#4 [id*=test1]')

it selects the correct div. However, if I use this query,

jQuery('#4 #test1')

it doesn't work. Any Idea?

Answer 1

It is not valid to have duplicate ids within the same document.

If you are building this dynamically then try prepending the parent id to the child so it would be like:

<td id="r4">
    <div id="r4_test1" class="test1"></div>
    <div id="r4_test2" class="test2"></div>
</td>
<td id="r5">
    <div id="r5_test1" class="test1"></div>
    <div id="r5_test2" class="test2"></div>
</td>

Note, starting an ID with a number is also invalid, so I took the liberty to prepend "r" to your row ids.

I would recommend using the selector:

$('#r5 .test1')

Answer 2

Seems to work for me: http://jsfiddle.net/HwgVe/

Answer 3

Space isn't strictly an 'and' condition. In your own example, jQuery('#4 #test1') space means to get children of #4 called #test1 if you see what I mean

The jquery docs for this explain it better than I do!

jQuery('ancestor descendant') Selects all elements that are descendants of a given ancestor.

Answer 4

Thinking of selectors in terms of "AND" and "OR" probably isn't the most helpful way to go about things. If a space actually meant "AND", then these two statements would be identical:

$('.parent_class .child_class')

$('.child_class .parent_class')

If a selector was a simple "AND", then these statements would select all items that meet both criteria.

In reality, these statements are very different. A space in jQuery and CSS selectors actually shows inheritance. When you have two separate classes, as in my example, you're always saying "select the class that is second in the list, only if it is contained by an element with the first class in the list."

You could say that a comma means "OR", but really it just separates two selecting statements from each other, so that you can select two completely separate items or groups of items.

The jQuery selector syntax borrows from CSS, so this group of tutorials on w3schools.com might be a helpful place to start.

Answer 5

I think you ought to drop the ids off the div tags and just work with classes.

use $('#d5 .test1') or
$('#d5').find('.test1')

I usually use the latter because it's just easier to read when I go back a month later to look at the code.

<td id="d4">
  <div class="test1">w</div>
  <div class="test2">x</div>
</td>
<td id="d5">
  <div class="test1">y</div>
  <div class="test2">z</div>
</td>