我有一个在 HTML 中动态修改的列表。像这样:
<ol>
<li>Some value<li>
<li>another</li>
<li>more</li>
<li>more<li>
<li>more</li>
</ol>
我想要做的是,当用户单击该列表中的某个元素时,我想调用一个函数并传递一个数字参数,该参数表示该元素<li>
相对于 parent的偏移量<ol>
。
我该怎么做?
我正在使用 jQuery。
我有一个在 HTML 中动态修改的列表。像这样:
<ol>
<li>Some value<li>
<li>another</li>
<li>more</li>
<li>more<li>
<li>more</li>
</ol>
我想要做的是,当用户单击该列表中的某个元素时,我想调用一个函数并传递一个数字参数,该参数表示该元素<li>
相对于 parent的偏移量<ol>
。
我该怎么做?
我正在使用 jQuery。
结合使用on()
(用于绑定最小事件处理程序并处理您提到的动态更新)和index()
确定元素相对于其父元素的索引的方法。
$("ol").on("click", "li", function() {
yourFunction($(this).index());
});
如果你没有 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);
如果您必须支持没有 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);