javascript - 要素番号の取得または識別子の設定

Question

HTML で動的に変更されるリストがあります。このような：

<ol>
  <li>Some value<li>
  <li>another</li>
  <li>more</li>
  <li>more<li>
  <li>more</li>
</ol>

私がやりたいことは、ユーザーがそのリスト内の特定の要素をクリックしたときに、関数を呼び出して<li>、親に対する相対的なオフセットを表す数値引数を渡したいということ<ol>です。

どうすればいいですか？

jQueryを使用しています。

Answer 1

Use a combination of on() (for binding minimum event handlers and to handle the dynamic updating that you mentioned) and the index() method to determine the element's index relative to its parent.

$("ol").on("click", "li", function() {
    yourFunction($(this).index());
});

jsFiddle.

---

If you didn't have jQuery...

var ol = document.querySelector("ol");
var olLi = ol.querySelectorAll("li");
var handleClick = function(e) {
    var target = e.target;
    var index = 0;

    while (target = target.previousElementSibling) {
        index++;   
    }

    yourFunction(index);

};

ol.addEventListener("click", handleClick);

jsFiddle.

---

If you had to support old browsers without jQuery...

var ol = document.getElementsByTagName("ol")[0];
var olLi = ol.getElementsByTagName("li");
var handleClick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    var index = 0;

    while (target = target.previousSibling) {
        (target.nodeType == 1) && (index++);   
    }

    yourFunction(index);

};

ol.addEventListener && ol.addEventListener("click", handleClick);
ol.attachEvent && ol.attachEvent("onclick", handleClick);

jsFiddle.

Answer 2

これには .index() を使用できます。

var selectedIndex = $("#yourID").index() + 1;

1から始まるインデックスのリンクは次のとおりです