JQuery: How to select other elements based on their relationship with an element represented by the this key-word?
I've a few titles and a divs that wraps the content related to each title. when the page loads, I add a plus image inside each header-title. I also, hide divs with their content. When user clicks the title, I'd like (1)to change plus image into minus image and (2) display the div and their content.
$(function () {
$("h6.blue").append(" <img src='../../Content/images/Effects/plus.gif' />");
$("h6.blue+div").hide();
//
$("h6.blue").click(function (event) {
if (this == event.target) {
//Add code here...
}
});
});
Above it was easier to write $("h6.blue+div") from $("h6.blue"). But with a this key-word arround, how do I do it? Can I do something like the code below?
if (this == event.target) {
$(this + "div")...
}
In fact, I want to select the div which is the direct sibling of the h6.blue contained in the this.
EDIT
Below is the Html code
<h6 class = "blue">My fisrt Title</h6>
<di开发者_如何学编程v>
Content here...
</div>
<h6 class = "">My second Title</h6>
<div>
Content here...
</div>
And so on...
Thanks for helping
Have you tried...
$(this).next("div")
$(this).next('div');
Depending on exactly what you're trying to select, use one of the sibling-traversing functions, such as:
.next()
.siblings()
.nextAll()
Works for me. http://jsfiddle.net/mattball/5JffG/
精彩评论