0

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

<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。有什么问题？

4

3 回答 3

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);

});
于 2020-02-27T13:05:49.333 回答
0

它每次返回 -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);
         }
    }
});
于 2013-08-15T16:59:11.867 回答
-1

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

  • 您使用的 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);
    };
于 2013-07-24T14:36:04.963 回答