Question

我的结构类似于

<div class="div1">
    <a class="myimg" href="#">clickme1</a>
    <span>myspan1</span>
    </div>

    <div class="div2">
     <a class="myimg" href="#">clickme1</a>
      <span>myspan2</span>
    </div>

CSS

<style type="text/css">
    .div1
    {
      border: 1px solid red;    

    }
     .div2
    {
      border: 1px solid black;    

    }
     .test
    {
      border: 1px solid yellow;    

    }

    </style>



<script type="text/javascript">
        $(function () {
            $("a.myimg").click(function () {
                alert($(this).html());
                $("span").addClass("test");

            });



        });

现在当我点击<a>时，两个div都会受到影响，我想要的是如果点击div1 <a>那么它应该影响span1，对于div 2也是如此。如何在jquery中得到了他的支持。

    </script>

编辑：是否有可能通过使用类似于

的上下文

$("a.myimg",context).click(function () {

Answer 1

使用.next("span")更改代码以指定要修改的范围（图像旁边的范围）...

$(function () {
    $("a.myimg").click(function () {
        alert($(this).html());
        $(this).next("span").addClass("test");
    });
});

Answer 2

$(this).next("span")

事件处理程序中的

将返回紧跟在后面的span元素。

Answer 3

$(function () {
    $("a").click(function () {
        $(this).next("span").html("Span Changed")
    });
});

http://jsfiddle.net/dBPb8/

Answer 4

使用sibblings方法

$(function () {
            $("a.myimg").click(function () {  
                alert($(this).html());
                $(this).siblings('span').addClass("test");
            });
        });

如何选择<div> </div> </span>下的特定<span>

4 个答案: