Question

我的html看起来像这样：

<main>
    <div class="list">
        <div class="newdiv">
            <input type="text" class="stuff ind">
            <button class="delete">Delete</button>
            <button class="add">Add</button>
            <div class="start ind">0</div>
            <div class="creation-time ind">0</div>
            <div class="priv ind">0</div>
        </div>
    </div>
</main>

其中一些元素还有其他类＆ind;＆＃39; ind。我的问题是，我可以通过类和索引访问这些元素吗？例如，我希望得到第三个元素＆＃39; ind＆＃39;类。我尝试了$('.list').find('.ind').eq(3)这样的事情，但没有运气。

Answer 1

此代码段使用.toArray()方法。

一旦所有.ind都在名为indArray的数组中，就会通过for循环发送。
在每次迭代（循环）中，将为.ind分配与其索引相对应的文本。
每次迭代时，.ind都会有红色文字。
在第一个.ind（indArray[0]），因为它是输入而不是div，它的数字由.value而不是.innerHTML设置。

因此，作为.ind的数组，您现在可以通过索引和类轻松访问。如果您想选择第三个.ind以获得粉红色背景：

indArray[2].style.backgroundColor = "pink";

注意：您可能已经意识到数组是基于零的，因此indArray[2]是数组的第三个元素。

<强>段

$(function() {
     var indArray = $('.ind').toArray();
      
      for(var i = 0; i < indArray.length; i++) {
        indArray[i].innerHTML = i;
        indArray[i].style.color = "red";
        if(i === 0) {
          indArray[i].value = i;
        }
      }
  });

main {
  border: 4px dotted black;
  background: rgba(0, 0, 0, .3);
}
div {
  border: 1px dashed blue;
  background: rgba(255, 255, 255, .3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="list">
    <div class="newdiv">
      <input type="text" class="stuff ind">
      <button class="delete">Delete</button>
      <button class="add">Add</button>
      <div class="start ind">0</div>
      <div class="creation-time ind">0</div>
      <div class="priv ind">0</div>
    </div>
  </div>
</main>

Answer 2

您的原始$('.list').find('.ind').eq(3)应该可以正常完成您想要做的事情（您确定jQuery正确加载吗？），或者$('.list .ind').eq(3)也可以工作（虽然效率较低）。

Answer 3

我能够使用复合CSS选择器获取它，然后抓取数组中的第3个元素。所以$('.list .ind').eq(2);

这是在JS Bin工作：https://jsbin.com/cirikapewi/edit?html,js,output

在给定索引处逐个元素地获取

3 个答案: