Index value not being recognized correctly

Asked

Viewed 41 times

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 on a link with class .dock, it opens a content on top of the current page, similar to a shadowbox. The problem is that only the first link works, I believe it is giving some fault in obtaining the value index of each sequential element.

In the HTML is 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 script simple in a separate file, with the same functionality and worked. Probably is the value index that is giving error, even.

jquery html índices

1 answer

3


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

$('.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);      
    });
});
  • 2

    Perfect! Now it worked fine. Thank you very much

  • Buddy, I got a problem! It suddenly stopped working. I added more links and more content and I click on the 7th link, for example, and open the 3rd content.

  • 1

    @Ricardo Can you build an example that reproduces the problem ho http://jsfiddle.net? Maybe this is the case to post a new question about this, but let me see the code first.

  • http://jsfiddle.net/3tvqhcys/ || Well, I didn’t use my html because it’s big, but it’s similar. There is a part where the links have an orientation and another part where the links have another orientation. In this example, the last links do not work.

  • 1

    I got it, @Ricardo. As I explained in the answer, the index is the index of the element in relation to the father, including all the children of the father (not only those with his class). From what I see, using index is not a good approach in your case, I suggest something different: http://jsfiddle.net/3tvqhcys/4/

  • 1

    Another thing: I noticed that you have repeated Ids in your HTML, this cannot... @Ricardo

  • Ufa! Now it worked. Thanks again! Much better to use an ID for each content, more organized. About having the same ID, is that I was just using it as an exception to another jQuery function that I use, know that one should not have two equal ID. Thanks again for the

Show 2 more comments

Browser other questions tagged jquery html índices

You are not signed in. Login or sign up in order to post.