Index value is not being recognized correctly

Question

Index value is not being recognized correctly

Navigation

#1 by (3 votes)

4

I have the following code jQuery :

$('.dock-a').hide();
$('.dock').each(function(){
    var DOCK = $(this);
    DOCK.click(function(){
        var DOCK_largura = $(window).width(),
            DOCK_index = $(this).index(),
            DOCK_content = $('.dock-content:eq('+DOCK_index+')'),
            DOCK_a = $('.dock-a:eq('+DOCK_index+')');
        beforeClick = $(window).scrollTop();

        DOCK_content.animate({ 'width': DOCK_largura+'px' }, 500);
        DOCK_a.delay(500).show().animate({ 'opacity':'1' }, 300);
        DOCK_content.delay(400).animate({ 'height': DOCK_a.outerHeight(true)+'px' }, 200);      
    });
});

The purpose of it is: when someone clicks a link with class .dock , it opens content on top of the current page, similar to shadowbox . The problem is that only the first link works, I believe it is failing to get the index value of each sequential element.

No HTML looks like this:

<div class="link">
   <div class="box">
      <a href="#" class="dock">Um</a>
   </div>
</div>
<div class="link">
   <div class="box">
      <a href="#" class="dock">Dois</a>
   </div>
</div>
<div class="link">
   <div class="box">
      <a href="#" class="dock">Três</a>
   </div>
</div>

<div class="dock-content">
   <div class="dock-a">
      Texto do link Um.
   </div>
</div>
<div class="dock-content">
   <div class="dock-a">
      Texto do link Doi.
   </div>
</div>
<div class="dock-content">
   <div class="dock-a">
      Texto do link Três.
   </div>
</div>

I tested a simple% wizard in a separate file, with the same functionality and worked. It is probably the script value that is giving error, even.

html jquery

asked by anonymous 15.12.2014 / 19:07

1 answer

Photo taken by the camera returns inverted Get a value inside the HTML cURL

score 3 · Accepted Answer

The .index() returns the index of the requested element relative to the parent element . In your case, all links will have zero index. I think you want the index of the .link element that contains the link, right? In this case, you can do this:

$('.dock-a').hide();
$('.dock').each(function(){
    var DOCK = $(this);
    DOCK.click(function(){
        var DOCK_largura = $(window).width(),
            DOCK_index = $(this).closest('.link').index(), // <--- mudança aqui
            DOCK_content = $('.dock-content:eq('+DOCK_index+')'),
            DOCK_a = $('.dock-a:eq('+DOCK_index+')');
        beforeClick = $(window).scrollTop();

        DOCK_content.animate({ 'width': DOCK_largura+'px' }, 500);
        DOCK_a.delay(500).show().animate({ 'opacity':'1' }, 300);
        DOCK_content.delay(400).animate({ 'height': DOCK_a.outerHeight(true)+'px' }, 200);      
    });
});