使用jQuery获取孩子的索引

Question

我想获取被点击的孩子的索引

<div class="parent">
    <div class="child">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="child">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="child">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</div>

jQuery:

$('.child .c1').click(function(){
    alert($(this).parent().index())
})

我总是得到-1。我该怎么做？

---

编辑：

我试过这个：

$('.child .c1').click(function(){
    alert($(this).index())
})

结果始终为 -1。 有什么问题？

Answer 1

var child_index = '';

$('.c1').click(function() {

  var parent = $(this).parent();


  child_index = $(parent).index();

  alert(child_index);

});

.div{
position:absolute;
left:45%;
top:0;
}
.child{
margin:1%;
text-align:center;
background-color:gray;
width:100px;
height:100px;
}

.c1,.c2{
color:white;
background-color:blue;
}
.c2{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="div">
  <div class="child">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <p>click only work on <strong>c1</strong></p>
  </div>

  <div class="child">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <p>click only work on <strong>c1</strong></p>
  </div>

  <div class="child">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <p>click only work on <strong>c1</strong></p>
  </div>
</div>

var child_index = ''; //to store .child class parent index when clicked

$('.c1').click(function() {

    var parent = $(this).parent(); //getting the specific parent of c1

    //parent variable value now is = .child
    child_index = $(parent).index();

    alert(child_index);

});

Answer 2

它每次返回 -1 的原因是因为在 Jquery 中 -1 是一个布尔值，表示 false 而 0 是 true。 .index() 基本上是询问一个元素是否存在。

如果你想找到它是什么数字，这是我认为可以工作的代码。

var loop = $('.parent .child').length;

$('.child .c1').click(function(){
    for(i=1; i<= loop; i++) {
         if($(this).parent() === $('.parent').children().eq(i)) {
             alert(i);
         }
    }
});

Answer 3

编辑由于没有人可以重现该问题，这里有一些可能性：

• 您使用的 jQuery 版本与您页面上的另一个脚本冲突。因为您的点击事件处理程序似乎正在触发，因为您收到了一个警报框。
• • 尝试使用最新版本的 jQuery。
• 您的 jQuery 版本与您当前使用的浏览器冲突。当您遇到 JavaScript 问题时，您应该报告您正在使用的库（如果有）和浏览器的版本。
• • 在另一个浏览器中检查您的结果并报告。
• 在触发点击事件之前，您的 HTML 已被操作。页面上还有哪些其他代码？
• • 分享更完整的源代码清单。

---

alert($(this).parent().prevAll().length);

使用 .prevAll 获取所有先前的兄弟，然后使用该集合的长度作为索引。

edit 如果您希望出于索引目的而忽略其他元素，请使用 .prevAll(".child")。

编辑您可以尝试一起删除 jQuery

var elms=document.getElementsByClassName("c1");
for(var i=0; i<elms.length; i++)
    elms[i].onclick = function() {
        var elm = this;
        var index = 0;
        elm = elm.parentNode;
        if(elm) {
            while(elm=elm.previousSibling) {
                if(elm.nodeType == 1) {
                    index++;
                }
            }
        } else {
            alert("There's no parent node");
        }
        alert(index);
    };