Response title
This is preview!
JQuery Context usage and the sibling selector
in Using jQuery
•
11 years ago
Hi,
This is regarding a sample query that is present in the book "JQuery in Action". Here's the code in question
I have highlighted the selector expression(yellow) and the DOM element to which the change handler is applied ( red) and the element thats selected as a result(in blue)
$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});
And the corresponding HTML for this input textbox and the span being selected is below:
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperial rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
My doubt is regarding the selector expression : $('~ span:first',this) where 'this' is a textbox. From what I understand from the $(selector,context) usage, the above expression would translate to this.find("~ span:first"). And find only searches the elements matching the selector expression only in the "DESCENDANTS" excluding the element on which find method is called... So how is this working? here the target span is a sibling of 'this'(the textbox)..not a child.
Also, from the jQuery documentation, I see that the sibling selector has two parameters like a ~ b. I tried selecting ~ span:first separately in a test sample and it gives me error, but * ~ span:first works fine (as expected). how come in above case, that the first parameter was omitted and it still worked fine? Does it take the context parameter for that missing first one? If so, what are the rules around it? Any jQuery documentation link on this functionality?
Please clarify and thanks in advance.
-chaitanya
1