CODEWITHSUNDEEP
jquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Hide/Show divs depending on index, can't get correct indexing

I have never had a problem with this before but I am trying to hide/show divs based on indexing. However, it either only works with the first row with every row after that just copying the first or it counts every section as index 1.

$(document).ready(function() {
  
  $('.box-highlight').hide();
  
  $('.container .box').click(function() {
    var a = $(this).index();
    
    $('.box').hide();
    $('.box-highlight').eq(a).show();
  });
  
});
.box {
  height: 5em;
  background: #e5e5e5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 1</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 2</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 3</h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 4</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 5</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 6</h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 7</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 8</h4>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <h4>Box 9</h4>
      </div>
    </div>
  </div>
</div>

<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 1</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 2</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 3</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 4</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 5</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 6</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 7</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 8</h2>
      </div>
    </div>
  </div>
</div>
<div class="box-highlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>This is the info for box 9</h2>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 32

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

A simple 

alert(a);

after $(this).index() shows why it always shows the first one: a always = 0

From the docs for index() https://api.jquery.com/index/ :

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

as all your <div class='box'> tags are in different col-sm-4's, they do not have any siblings, so will always be 0 (which they are).

The next paragraphs state:

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

and

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

So you can change your code to:

var a = $(this).index(".container .box");

and it works fine.

Here's a jsfiddle with the change applied: https://jsfiddle.net/39kzc3dy/

Upvotes: 3

Related Questions