如何获取父LI索引和子LI索引

Question

小提琴:http://jsfiddle.net/fyrx459k/

脚本:

$(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>

如何修改脚本以具有以下内容:

• 当Test#单击父LI()时,控制台将显示索引 - 例如,单击Test4将输出3(第四项)
• 当点击子LI(Test# - #)时,它将显示父索引和子索引 - 例如,单击Test3 - 1将输出2.0(2是父LI,0是第一个子LI)

Answer 1

这是一种方法:

$(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

一个非常基本的解决方案 $(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>