How to get the parent LI index and the sub LI index

Question

Fiddle: http://jsfiddle.net/fyrx459k/

Script:

$(function() {
    $('.ul1 li').click( function(e) {
        e.preventDefault();
        var liIndex = $(this).index('li');
        console.log(liIndex);
    );
});

HTML:

<ul class="ul1" id="ul1">
    <li><a href="">Test</a></li>
    <li><a href="">Test2</a></li>
    <li><a href="">Test3</a>
        <ul class="ul2">
            <li><a href="">Test3 - 1</a></li>
            <li><a href="">Test3 - 2</a></li>
        </ul>
    </li>
    <li><a href="">Test4</a>
        <ul class="ul2">
            <li><a href="">Test4 - 1</a></li>
            <li><a href="">Test4 - 2</a></li>
        </ul>
    </li>
</ul>

How can I modify the script to have the following:

• When a parent LI (Test#) is clicked the console will display the index - for example, clicking on Test4 will output a 3 (fourth item)
• When clicking on a sub LI (Test# - #) it will display the parent index and the child index - for example, clicking on Test3 - 1 will output 2.0 (2 being the parent LI and 0 being the first child sub LI)

Answer 1

This is one way of doing it:

$(function () {
    $('.ul1 li').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        var i = $(this).parentsUntil('#ul1').add(this).map(function () {
            return this.tagName === 'LI' ? $(this).index() : null;
        }).get().join('.');
    });
});

Answer 2

A pretty basic solution using $(this).parents("li")

$(function() {
  $('.ul1 li').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var liIndex = "";
    var $parents = $(this).parents("li");
    if ($parents.length > 0)
      liIndex += ($parents.index() + 1) + ".";
    liIndex += ($(this).index() + 1);
    alert(liIndex);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul1" id="ul1">
  <li><a href="">Test</a>
  </li>
  <li><a href="">Test2</a>
  </li>
  <li><a href="">Test3</a>
    <ul class="ul2">
      <li><a href="">Test3 - 1</a>
      </li>
      <li><a href="">Test3 - 2</a>
      </li>
    </ul>
  </li>
  <li><a href="">Test4</a>
    <ul class="ul2">
      <li><a href="">Test4 - 1</a>
      </li>
      <li><a href="">Test4 - 2</a>
      </li>
    </ul>
  </li>
</ul>

Answer 3

I love html5 tags, so check if this solution can be useful. Otherwise you can do the same thing with the ID or whatever you prefer.

function checkIndex(element) {
  deepCheck(element, '');
}
     
function deepCheck(element, index) {
  if($(element).data('index') && $(element).is('li')) {
    var newIndex = '';
    if(index.length === 0) {
      newIndex = 'Element indexes: ' + $(element).data('index')
    } else {
      newIndex = index + ' - ' + $(element).data('index');
    }
    deepCheck($(element).parent(), newIndex);
  } else if($(element).data('root')) {
    alert(index);
  } else {
    deepCheck($(element).parent(), index)
  }
}

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    checkIndex(this);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul data-root="true" class="ul1" id="ul1">
    <li data-index="1"><a href="#">Test</a></li>
    <li data-index="2"><a href="#">Test2</a></li>
    <li data-index="3"><a href="#">Test3</a>
        <ul class="ul2">
            <li data-index="1"><a href="#">Test3 - 1</a></li>
            <li data-index="2"><a href="#">Test3 - 2</a></li>
        </ul>
    </li>
    <li data-index="4"><a href="#">Test4</a>
        <ul class="ul2">
            <li data-index="1"><a href="#">Test4 - 1</a></li>
            <li data-index="2"><a href="#">Test4 - 2</a></li>
        </ul>
    </li>
</ul>

Answer 4

Use parents('li') to check if the clicked li has a li ancestor, .index() to determine the index of a li, .preventDefault() to stop the click from following the link and .stopPropagation to stop event from bubbling. This should do it:

$('#ul1 li').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var arr = [];
    arr.push( $(this).index() );
    !$(this).parents('li').length ||
    arr.push( $(this).parents('li').index() );
    console.log( arr.reverse().join('.') );
});

$(function() {
    $('#ul1 li').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var arr = [];
        arr.push( $(this).index() );
        !$(this).parents('li').length ||
        arr.push( $(this).parents('li').index() );
        console.log( arr.reverse().join('.') );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul1" id="ul1">
    <li><a href="">Test</a></li>
    <li><a href="">Test2</a></li>
    <li><a href="">Test3</a>
        <ul class="ul2">
            <li><a href="">Test3 - 1</a></li>
            <li><a href="">Test3 - 2</a></li>
        </ul>
    </li>
    <li><a href="">Test4</a>
        <ul class="ul2">
            <li><a href="">Test4 - 1</a></li>
            <li><a href="">Test4 - 2</a></li>
        </ul>
    </li>
</ul>