开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜