CODEWITHSUNDEEP
jqueryhtml
Si8
Si8

Reputation: 9225

How to retrieve the index

$(function() {
  $(".menu ul").on("click", "li", function(e) {
    e.preventDefault();
    alert($(this).closest("ul").prev().index());
    alert($(this).index());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="javascript:void(0);">C1</a>
    <ul>
      <li><a href="javascript:void(0);" class="documents">Assessments Not Started</a>
      </li>
      <li><a href="javascript:void(0);" class="messages">Assessments Started</a>
      </li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">C2</a>
    <ul>
      <li><a href="javascript:void(0);" class="documents">Assessments Not Started</a>
      </li>
      <li><a href="javascript:void(0);" class="messages">Assessments Started</a>
      </li>
    </ul>
  </li>
</ul>

How can I get the PARENT LI index as well as the clicked index from the above.

Example:

C2 > Assessments Started (should alert: 1, 1);
C1 > Assessments Not Started (should alert: 0, 0);

But it is always displaying 0 as the closest index.

Upvotes: 0

Views: 32

Answers (4)

Костя Самсин
Костя Самсин

Reputation: 57

try please.

$(this).closest("ul").parent();

Upvotes: 1

MoLow
MoLow

Reputation: 3084

$(function() {
    $(".menu ul").on("click", "li", function(e) {
    e.preventDefault();
    alert($(this).parents("li").index());
    alert($(this).index());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li><a href="javascript:void(0);">C1</a>
        <ul>
            <li><a href="javascript:void(0);" class="documents">Assessments Not Started</a></li>
            <li><a href="javascript:void(0);" class="messages">Assessments Started</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0);">C2</a>
        <ul>
            <li><a href="javascript:void(0);" class="documents">Assessments Not Started</a></li>
            <li><a href="javascript:void(0);" class="messages">Assessments Started</a></li>
        </ul>
    </li>
</ul>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue is because you're traversing the DOM and getting the a element which is the sibling of the parent ul, not the li parent. Try this:

$(".menu ul").on("click", "li", function(e) {
    e.preventDefault();
    console.log($(this).closest('ul').closest('li').index(), $(this).index());
});

Example fiddle

Upvotes: 2

Daan
Daan

Reputation: 2799

Select it with the .parent() selector.

$(function() {
    $(".menu ul").on("click", "li", function(e) {
    e.preventDefault();
    alert($(this).parent().parent().index());
    alert($(this).index());
  });
});

Upvotes: 1

Related Questions