Получить индекс элемента, как ребенка относительно родителей

Question

Получить индекс элемента, как ребенка относительно родителей

допустим, у меня есть эта разметка:

<ul id="wizard">

    <li>Step 1</li>

    <li>Step 2</li>

</ul>

и у меня есть этот jQuery:

$("#wizard li").click(function () {

    // alert index of li relative to ul parent

});

как я могу получить индекс ребенка li относительно его родителя, при нажатии, что li?

например, когда вы нажимаете "Шаг 1",alert С "0"должно выскочить.

357 4

jQuery javascript

4 ответов:

Comments

Ничего не найдено.

redsquare · Accepted Answer · 2013-08-19 14:51:46

$("#wizard li").click(function () {
    console.log( $(this).index() );
});
однако вместо того, чтобы прикреплять один обработчик щелчка для каждого элемента списка, лучше (с точки зрения производительности) использовать delegate, который будет выглядеть так:
$("#wizard").delegate('li', 'click', function () {
    console.log( $(this).index() );
});
в jQuery 1.7+, вы должны использовать on. Приведенный ниже пример связывает событие с #wizard элемент, работающий как делегат события:
$("#wizard").on("click", "li", function() {
    console.log( $(this).index() );
});

Mash · Accepted Answer · 2011-02-14 20:51:27

что-то типа:

$("ul#wizard li").click(function () {
  var index = $("ul#wizard li").index(this);
  alert("index is: " + index)
});

Kimtho6 · Accepted Answer · 2011-09-01 13:13:49

взгляните на это пример.

$("#wizard li").click(function () {
    alert($(this).index()); // alert index of li relative to ul parent
});

jimmystormig · Accepted Answer · 2011-02-14 22:21:58

делегировать и жить просты в использовании, но если у вас не будет больше li:S добавлено динамически, вы можете использовать делагацию событий с обычной привязкой/щелчком. Должен быть некоторый прирост производительности с использованием этого метода, так как DOM не нужно будет отслеживать для новых совпадающих элементов. У меня нет никаких фактических чисел, но это имеет смысл:)
$("#wizard").click(function (e) {
    var source = $(e.target);
    if(source.is("li")){
        // alert index of li relative to ul parent
        alert(source.index());
    }
});
вы можете проверить его в jsFiddle:http://jsfiddle.net/jimmysv/4Sfdh/1/