使用 event.currentTarget 获取子项的索引
get index of child with event.currentTarget
如何摆脱jQuery的".index()"?我正在寻找的只是一种获取按钮索引的本机方法,请参阅下面的源代码(工作完美,但我真的找不到任何 Vanilla-JS 解决方案,我不想使用 jQuery 完成这么小的任务)。谢谢。
function navButtonClick(ev) {
var buttonIndex = $(ev.currentTarget).index(); /* How to get rid of jQuery? */
document.getElementById("output").innerHTML = buttonIndex;
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}
document.addEventListener("DOMContentLoaded", startTemplate);
The HTML part looks like this:
<nav id="navigation" role="navigation">
<button type="button"> <em>Navi tab 1</em> </button>
<button type="button"> Navi tab 2 </button>
<button type="button"> Navi tab 3 </button>
<button type="button"> Navi tab 4 </button>
</nav>
<div id="output"></div>
你可以
这样做:
function navButtonClick(ev) {
var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this);
document.getElementById("output").innerHTML = buttonIndex;
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}
document.addEventListener("DOMContentLoaded", startTemplate);
检查下面的代码段:
function navButtonClick(ev) {
var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this);
document.getElementById("output").innerHTML = buttonIndex;
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}
document.addEventListener("DOMContentLoaded", startTemplate);
<nav id="navigation" role="navigation">
<button type="button"> <em>Navi tab 1</em>
</button>
<button type="button">Navi tab 2</button>
<button type="button">Navi tab 3</button>
<button type="button">Navi tab 4</button>
</nav>
<div id="output"></div>
您可以通过两种不同的方式执行此操作。首先,在添加事件侦听器时将按钮的索引传递给相应的函数:
function navButtonClick(buttonIndex) {
document.getElementById("output").innerHTML = buttonIndex;
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick.bind(null, i));
}
}
startTemplate();
JSFiddle
其次,创建一个函数来动态检查元素的索引:
function navButtonClick() {
document.getElementById("output").innerHTML = getIndex(this);
}
function getIndex(elm) {
var parent = elm.parentElement;
for (var i = 0; i < parent.children.length; i++) {
if (parent.children[i].isEqualNode(elm)) {
return i;
}
}
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}
startTemplate();
JSFiddle
<script>
function navButtonClick(index) {
return function (ev) {
document.getElementById("output").innerHTML = index;
}
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick(i));
}
}
document.addEventListener("DOMContentLoaded", startTemplate);
</script>
希望,它:)工作
无论如何,仅适用于按钮(即使对于它们,我也需要在 chrome 中closest
)。
document.addEventListener('click', function (event) {
var target = event.target, nodes, i;
if (target.closest) {
target = target.closest('button');
}
if (target && target.tagName === 'BUTTON') {
nodes = target.parentElement.children;
for (i=0; nodes[i]!==target; ++i);
document.querySelector("output").textContent = i;
}
})
<nav id="navigation" role="navigation">
<button type="button"> <em>Navi tab 1</em> </button>
<button type="button"> Navi tab 2 </button>
<button type="button"> Navi tab 3 </button>
<button type="button"> Navi tab 4 </button>
</nav>
<output></output>
ES6 风格的答案:
const indexOf = element => Array.from(element.parentNode.children).indexOf(element)
const buttonIndex = indexOf(event.currentTarget)
相关文章:
- 在jQuery中获取表的行索引
- 在JavaScript中通过索引从对象数组中获取值
- Javascript获取所有锚链接的索引
- NodeJS在一个较大的字符串中获取一个字符串的索引
- angularjs$watch获取已更改数组项的索引
- Javascript Array 从特定索引获取偏移索引
- 使用名称 jQuery 按索引获取 ID 值
- 在jQuery中通过索引获取字典的键值
- 相同的类多次如何使用索引获取对象
- Boostrap 表:按行索引获取行数据
- 如何在ag网格中通过索引获取节点
- 使用对象哈希映射上的索引获取值
- 使用jQuery的索引获取表的偏移位置
- 如何通过索引获取jQueryUITabsDOM元素
- 使用Javascript通过索引获取HTML有序列表中的元素
- Jquery使用数组中的索引获取某些选择器的文本值
- 如何在javascript中使用索引获取对象的属性值
- 如何使用索引获取整个对象
- 如何通过元素的数据项索引获取元素
- 根据另一个数组的索引获取一个数组的值