How to manipulate a div when clicking link in current list item
I have a list of items which contains a div and a link e.g.
<ul>
<li class="item">
<div class="div1"></div>
<a class="link1"></a>
</li>
<li class="item">
<div class="div1"></div>
<a class="link1"></a>
</li>
<li class="item">
<div class="div1"></div>
<a class="link1"></a>
</li>
</ul>
I would like to click the link in a list item (link1) and update/manipulate the 开发者_运维知识库div content (div1) for the current list item. click the link in an other list item should do the same to it's corresponding div.
Any help on how I can get this done.
$(function(){
$("li.item a.link1").click(function() {
$(this).siblings("div.div1").html("Yeah, that's the manipulated div.");
});
});
Reference:
http://api.jquery.com/siblings/
Try this:
$(function(){
$("a.link1").click(function(){
var div1 = $(this).prev("div.div1")
//Do something with div1
});
});
$("a[class^='link']").click(function () {
var div = $(this).siblings("div");
// Update div
});
Example: http://jsfiddle.net/tqDsD/
精彩评论