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

这是一种方法:

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

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

我喜欢html5标签，所以检查一下这个解决方案是否有用。否则，您可以对ID或您喜欢的任何内容执行相同的操作。

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>

使用parents('li')检查被点击的li是否有li的祖先，.index()确定li的索引，.preventDefault()阻止点击跟随链接，.stopPropagation阻止事件冒泡。应该这样做:

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

我建议返回false。它不需要同时使用preventDefault和stopPropagation，也不需要将事件存储在e中。

此外，一些更结构化的选择在这里会很有帮助。只有两种情况需要处理，一类为ul2的父元素存在和不存在的情况。在这种情况下，需要两个查询来确定父索引和与ul2元素相关的当前索引。如果不是，则只需要确定相对ul1索引。

我包含了一些额外的元素，以显示需要更有针对性的方法。

$(function(){
    $('.ul1 li').click(function() {
        var ul2 = $(this).closest('.ul2'),
        location = ul2.length > 0 ? 
            ul2.parent().index('.ul1 > li')+"."+ul2.find('li').index(this) :
            $(this).index('.ul1 > li');
        log(location);
        return false;
    });
});
function log(msg){ $("#result").text(msg); }

<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>
<div id="result"></div>