how to select specific <span> under <div>

Question

Hi,

I have a structure something similar to,

<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");

            });



        });

now when I click on <a> span in both the divs are getting affected, What I want is if I click on div1 <a> then it should affect span1, and same for div 2. How to achive his in jquery.

    </script>

EDIT: Is it possible by using context, something similar to,

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

Answer 1

$(this).next("span")

inside your event handler will return the immediately following span element.

Answer 2

Change your code to specify the span you want to modify (The one next to the image) with .next("span")...

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

Answer 3

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

http://jsfiddle.net/dBPb8/

Answer 4

use sibblings method

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