Как получить родительский индекс LI и индекс sub LI

Ответ 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('.');
    });
});

Ответ 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>

Ответ 3

Мне нравятся теги html5, поэтому проверьте, может ли это решение быть полезным. В противном случае вы можете сделать то же самое с идентификатором или тем, что вы предпочитаете.

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>

Ответ 4

Использовать parents('li'), чтобы проверить, имеет ли указатель li предка li li, чтобы определить индекс 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>

Ответ 5

Я предлагаю вернуть ложь. Это устраняет необходимость использования как 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>