CODEWITHSUNDEEP
javascriptjqueryhtml
CoreDo
CoreDo

Reputation: 2891

How i can select specific div from multiple divs in jquery

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>

Upvotes: 1

Views: 2377

Answers (2)

Lowkase
Lowkase

Reputation: 5699

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.

Upvotes: 0

musefan
musefan

Reputation: 48415

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 (i.e. it is check to see if the next .project div matches the .plink selector)

Upvotes: 4

Related Questions