I have this HTML code:
<span id="one">one</span>
<div>
<span>two</span>
</div>
<span id="click">click</span>
$("#click").click(function(){
$(this).css('color', 'red');
})
I would like to be able to change the color of
<span>two</span>
when I click the "click" span but without adding any custom CSS class or id attribute using jQuery.
In the exact case you describe, you can color that span with this selector:
$('#one').next('div').find('span').css('color','red');
Or as pimvdb pointed out:
$('#one + div span').css('color','red');
+ does the same as next() and this also eliminates having to use .find().
$("#click").click(function(){
$("div>span").css('color', 'red');
});
OR
you can use :contains
$("#click").click(function(){
$("span:contains(two)").css('color', 'red');
});
If your HTML is exactly as shown in the question then you can do this:
$("#click").click(function(){
$("#one").next().find("span").css("color", "red");
});
Here's a working example. This works by getting the span with id "one", then getting the next element (which is the div) and finally finding the span within that div.
