我如何从jquery中的多个div中选择特定的div

Question

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"

<script>

    $(document).ready(function(){
        $('.plink').hide();
        $('.project').mouseover(function(){
            $(this).next('.plink').fadeIn(400);
        });
        $('.project').mouseleave(function(){
            $(this).next('.plink').fadeOut(200);
        });

    });

</script>

<div class="project">
    <div class="plink">
        <div class="go"></div>
        <div class="goplus"><img src="images/more.png" border="0"/></div>
    </div>
    <div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
    <div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
    <div class="plink">
        <div class="go"></div>
        <div class="goplus"><img src="images/more.png" border="0"/></div>
    </div>
    <div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
    <div class="title">test2</div>
</div>

Answer 1

You can use find() instead of next() ...

$(this).find('.plink').fadeIn(400);

because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (ie it is check to see if the next .project div matches the .plink selector)

Answer 2

I would go the FIND route like musefan suggested. Here is the solution code:

http://jsfiddle.net/bx7YC/

<div class="project">
    <div class="plink">
        <div class="go">go</div>
        <div class="goplus">goplus</div>
     </div>
     <div class="pic">pic</div>
     <div class="title">Test1</div>
</div>

<div class="spacer_project"></div>

<div class="project">
    <div class="plink">
        <div class="go">go</div>
        <div class="goplus">goplus</div>
    </div>
    <div class="pic">pic</div>
    <div class="title">Test2</div>
</div>​

$('.plink').hide();

$('.project').mouseover(function(){
  $(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
  $(this).find('.plink').fadeOut(200);
});​

I replaced the broken img links with simple text for the jsfiddle.