Question

脚本：

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

如何修改脚本以使其具有以下内容：

当点击父LI（Test#）时，控制台将显示索引 - 例如，点击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")

的非常基本的解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我喜欢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>

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我建议归还假。它不需要同时使用preventDefault和stopPropagation，也可以将事件存储在e。

此外，一些更有条理的选择在这里会有所帮助。只有两种情况需要处理，其中父元素分类为ul2，而不是。在它的情况下，需要有两个查询来确定父元素索引和关于ul2元素的当前索引。如果没有，则只需确定相对ul1指数。

我添加了一些额外的元素，以表明需要更有针对性的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: