Получить индекс элемента Clicked в YUI

Question

У меня есть следующий код.

HTML

<ul>
    <li class="link"> link 1 </li>
    <li class="link"> link 2 </li>
    <li class="link"> link 3 </li>
    <li class="link"> link 4 </li>
</ul>\

* 1009 JavaScript *

 YUI().use("node", function(Y){

    Y.all(".link").on("click", function(em){
       alert("you clicked on "+ index +"link .");
       node = em.currentTarget;
       node.addClass("clicked");
       // alert(node.get("class"));
    });
     alert(Y.all("li").get("class"));
});

У меня есть два вопроса по этому вопросу.

1) При первом предупреждении должно отображаться имя класса «ссылка», но при этом должно появляться некоторое случайное число YUI_23123_. Почему так?

2) И я также хочу предупредить индекс. Например, когда пользователь нажимает на третью ссылку, он должен предупредить «Вы нажали 3 ссылку», и я также хочу использовать это значение индекса и в другом событии.

Как мы можем достичь индекса?

JSFiddle link

Answer 1

Интересный вопрос!

Для (1) Y.all (...) возвращает NodeList.К сожалению, возвращаемое значение «get» для nodeList, как ни странно, является другим NodeList, который интерпретируется при выводе предупреждения на то, что вы видите.Использование «getAttribute» вместо «get» приводит к более разумному (хотя, может быть, и бесполезному) выводу.

For (2) Чтобы достичь того, что вы хотите, вам нужно либо явно зациклить NodeList, либо использовать«делегат». Использование «делегата» гораздо более эффективно для страницы и позволяет динамически вставлять элементы «li», но «indexOf» может заметно замедляться с сотнями или тысячами элементов списка.

Использование каждого:

Y.all(".link").each(function (node, index) {

    node.on("click", function(em){
        alert("you clicked on "+ index +" link.");
        node.addClass("clicked");
        alert(node.getAttribute("class"));
    });
});

Использование делегата:

Y.one('ul').delegate("click", function (em) {
    var itemList =  em.container.all('li');;
    var node = em.currentTarget;
    alert("you clicked on "+ itemList.indexOf(node) +" link.");
    node.addClass("clicked");
    alert(node.getAttribute("class"));
}, 'li');

Answer 2

О 1) ...

Один HTML-элемент может иметь более одного класса. YUI вставляет некоторые из его универсальных классов, и вы получаете его вместо вашего класса CSS. Кроме того, вы вызываете get ("class") для списка html-элементов, который не обязательно должен иметь тот же класс css, поэтому я не уверен, как get ("class") должен вести себя правильно таким образом.

Я не знаю, в чём именно ваша проблема, но, возможно, метод hasClass () мог бы вам помочь? Или посмотрите на Node API: http://yuilibrary.com/yui/docs/api/classes/Node.html