JQuery stops working when adding link

Question

I am learning JQuery and was working with JQuery script which slides text through pictures:

<script>
        $(document).ready(function() {
            var currentImg = 1,
                totalImages = 4
                loopTime = 1000,
                intervalId = null;


            function displayTitle(imgNbr) {
                $('.title').hide();
                $('#image'+imgNbr).prev('div').show();
            }

            $('img').on('mouseover', function() {
                clearInterval(intervalId);
                displayTitle($(this).parent().attr('id').substring(5));
            }).on('mouseout', function() {
                currentImg = $(this).parent().attr('id').substring(5);
                startLoop();
            })

            function startLoop() {
                intervalId = setInterval(function() {
                    displayTitle(currentImg);
                    currentImg = ((currentImg == totalImages) ? 1 : parseInt(currentImg)+1);
                }, loopTime);
            }
            startLoop();
        });
   </script>

But when I try to add [a href="#"] tag between [div] and image tags it stops working. Could you please help me to fix it. Thanks.

<div class="imgcontainer">
    <div class="title">title 1</div>
    <div class="img" id="image1"><a href="#"><img src="images/image1.jpg" /></a></div>
</div>

<div class="imgcontainer">
    <div class="title">title 2</div>
    <div class="img" id="image2"><a href="#"><img src="images/image2.jpg" /></a></div>
</div>    

<div class="imgcontainer">
    <div class="title">title 3</div>
    <div class="img" id="image3"><a href="#"><img src="images/image3.jpg" /></a></div>
</div>

"it stops working." Can you elaborate more please? and a demo could be nice. — gdoron
– gdoron, Commented Jun 24, 2012 at 16:01

j08691 · Accepted Answer · 2012-06-24 16:04:48Z

2

Change:

displayTitle($(this).parent().attr('id').substring(5));

to:

displayTitle($(this).parents('div').attr('id').substring(5));

jsFiddle example.

answered Jun 24, 2012 at 16:04

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tvanfosson · Accepted Answer · 2012-06-24 16:03:59Z

It stops working because the div is no longer the preceding sibling. You should change the call to use prevAll('div') to select all preceding siblings that match the div selector.

The prev function only matches the first sibling before the current element and then only if it matches the selector. In this case, you've added an intervening element, the anchor tag, and so the div is no longer the first preceding sibling and the selector matches nothing. PrevAll considers all the preceding siblings matching the selector. In your case there's only one. If you change your mark up further to introduce additional divs, you'd have to adjust the selector to choose the appropriate one out of the set.

function displayTitle(imgNbr) {
    $('.title').hide();
     $('#image'+imgNbr).prevAll('div').show();
}

Collectives™ on Stack Overflow

JQuery stops working when adding link

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related