获取相对于父元素的子元素索引

2020/10/28 20:21 · javascript ·  · 0评论

假设我有这个标记:

<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”的。

$("#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() );
});

就像是:

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

看一下这个例子

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

如果您不想这样做,则无需像jQuery这样的大型库即可完成此操作。要通过内置的DOM操作实现此目的,请获取li数组中兄弟姐妹的集合,然后单击以检查该indexOf数组中被单击的元素。

const lis = [...document.querySelectorAll('#wizard > li')];
lis.forEach((li) => {
  li.addEventListener('click', () => {
    const index = lis.indexOf(li);
    console.log(index);
  });
});
<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

或者,通过事件委托:

const lis = [...document.querySelectorAll('#wizard li')];
document.querySelector('#wizard').addEventListener('click', ({ target }) => {
  // Make sure the clicked element is a <li> which is a child of wizard:
  if (!target.matches('#wizard > li')) return;
  
  const index = lis.indexOf(target);
  console.log(index);
});
<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

或者,如果子元素可能会动态变化(例如待办事项列表),那么您必须li在每次单击时构造s数组,而不是事先构造

const wizard = document.querySelector('#wizard');
wizard.addEventListener('click', ({ target }) => {
  // Make sure the clicked element is a <li>
  if (!target.matches('li')) return;
  
  const lis = [...wizard.children];
  const index = lis.indexOf(target);
  console.log(index);
});
<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

Delegate和Live易于使用,但是如果您不再动态添加任何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/

另一种方式

$("#wizard li").click(function () 
{
    $($(this),'#wizard"').index();
});

演示
https://jsfiddle.net/m9xge3f5/

本文地址:http://javascript.askforanswer.com/huoquxiangduiyufuyuansudeziyuansusuoyin.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!