mmmm (7) [Avatar] Offline
#1
from page 118 the following code is given (Bamboo application)

$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});

In order to understand the line $('~ span:first',this) and how it works I made a small example like this

$('#theboy').click(function(){
$('~ div:first',this).text('jones');
});


HTML CODE

http://pastebin.com/m578ed0d0

it doesn't work: it doesn't update the girl div with jone can someone tell me what I'm doing wrong and exand on the use of ~ more?

Thank kindly
bear.bibeault (675) [Avatar] Offline
#2
Re: Parent, child, siblings ~ updating siblings
If you are trying to understand the CSS ~ combinator, that's probably an over-complicated example to use (and that wasn't the intent of the example to begin with).

First, I'd take a look at the CSS Specification itself at: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Then write some simple examples that demonstrate its operation, working up to more complex examples.
mmmm (7) [Avatar] Offline
#3
Re: Parent, child, siblings ~ updating siblings
Yes thank you Ive read through the spec it and understand it.

But I could not understand why when I was following the correct syntax The Girl div doesn't update to 'Jones' as the The Girl div is the sibling of The Boy div i.e. this

where is my understanding gone wrong?
mraj (104) [Avatar] Offline
#4
Re: Parent, child, siblings ~ updating siblings
Hi 4m,

I tried your code, and it works if you use the jQuery library that came with the examples: 1.2.1. It does not work with jQuery 1.3.2.

With 1.3.2, you'll see an error if you add this alert to your code:
$('#theboy').click(function(){
alert(this.id + ' ' + $('~ div:first',this)[0].id);

Using the 'E ~ F' selector without the 'E' is not recommended (and apparently not compatible with newer versions of the jQuery library).

There is another post that discusses this selector that you might want to read:
http://www.manning-sandbox.com/thread.jspa?threadID=28069
mmmm (7) [Avatar] Offline
#5
Re: Parent, child, siblings ~ updating siblings
Thank you for the link.

4m