javascript - ANDOR Conditions in jQuery - Stack Overflow

admin管理员组

文章数量:1333724

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Sep 29, 2012 at 10:48 Eli 14.8k55 gold badges6161 silver badges7777 bronze badges asked Oct 12, 2010 at 15:11 RajasankarRajasankar 92811 gold badge2020 silver badges4242 bronze badges 1

• Check here jsfiddle/92NaR – Rajasankar Commented Oct 12, 2010 at 15:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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 remend using the selector:

$('#r5 .test1')

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.

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 ma means "OR", but really it just separates two selecting statements from each other, so that you can select two pletely separate items or groups of items.

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

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>

本文标签： javascriptANDOR Conditions in jQueryStack Overflow