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是真。 .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获取所有以前的兄弟姐妹，然后使用该集的长度作为索引。

编辑如果您希望忽略其他元素以进行索引，请使用.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);
    };

使用jQuery获取child的索引

3 个答案: