CODEWITHSUNDEEP
jqueryjquery-selectors
RubyRedGrapefruit
RubyRedGrapefruit

Reputation: 12224

How can I use a jQuery selector to target these elements?

I want to know how to write a jQuery selector to select each of the "input" items below. I do NOT want to select them all at once. These input boxes will not have names or ids. I probably must use some sort of child notation, but I'm not sure how to do it.

<div id="partdiv">
  <div class="floater">
    <input type="text"/> // Some input box with no id or name
  </div>
  <div id="descriptiondiv">
    <div class="floater">
      <input type="text"/> // Some input box with no id or name
    </div>
    <div id="positiondiv">
      <div class="floater"> 
        <input type="text"/> // Some input box with no id or name
      </div>
    </div>
  </div>
</div>

For the first one, for example , I tried:

    $("#partdiv > input").bind(....

but that did not work.

Upvotes: 0

Views: 92

Answers (5)

jfriend00
jfriend00

Reputation: 707328

There are many different ways to do this - each with different tradeoffs. You can use these selectors:

"#partDiv input:first"
"#descriptiondiv input:first"
"#positiondiv input"

Or these:

"#partDiv input:eq(0)"
"#partDiv input:eq(1)"
"#partDiv input:eq(2)"

Or these:

"#partDiv > .floater > input"
"#descriptiondiv > .floater > input"
"#positiondiv > .floater > input"

Note, that the "proper" way to do this would be to give each input it's own id or put it in a container that has an id (with no other input tags in the same container). Since neither of those is true, you have to use positional or hierarchy information to discern which input is which.

Which of these different methods to use depends upon how tight or loose you want the relationship between your exact HTML structure and your selectors (e.g. whether the selector still works with certain types of changes to the HTML or not).

The advantage to the first option is that it doesn't care how many levels/layers of markup there are between the div and the input, only that you're selecting the first input element in each div. Whereas the third option binds the selector to a very specific HTML implementation and if you put one extra div in between partDiv and the input, it would stop working. The first one would not stop working if you did that so the first and second are much less brittle than the third.

The advantage of the second option is that it's completely independent of the markup inside of partDiv. The only thing it cares about is the first, second and third input fields in that div.

The main advantage of the third option is that you could rearrange the order of the three input fields and the selectors would still work as long as you maintained uniqueness of the hierarchy specified in the selector.

Upvotes: 1

JAAulde
JAAulde

Reputation: 19560

$("#partdiv > input") says to select an input which is a direct child of element with ID partdiv. To find an input anywhere under the element partdiv you would use $("#partdiv input"). However, this would get all of your inputs at once since they all descend from #partdiv. So you will need to break it down further:

$( '#partdiv .floater input' ) //gets an input which lives under element with class floater which itself lives under element with ID partdiv

And etc...

Note that there are many many ways to skin this cat.

Upvotes: 1

Moe Sweet
Moe Sweet

Reputation: 3721

"#partdiv > input" didn't work because you're selecting immediate child '>' of '#partdiv' only.

These will do

1st input: $("#partdiv>.floater>input")
2nd input: $("#descriptiondiv>.floater>input")
3rd input: $("#positiondiv>.floater>input")

I noticed your divs are wrapped in a weird way, is that what you really meant?

Upvotes: 1

roselan
roselan

Reputation: 3775

$('input').bind('...

each of the input will be binded to the event you want (click, change, whatever).

When you are in the event function, "this" correspond to the one input where the event occurred. (ie, the one clicked),

alternatively you could use $('input').click(..., or $('input').change(...

but I invite you to read the documentation on .on(), the event binder to unite them all.

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Does this help:

$("#partDiv > input").live("click", function() {
  alert($(this).val());
});

Upvotes: 0

Related Questions