Question

我有这种结构：

<form>
 <div class="name"></div>
 <div class="name"></div>
 <div class="name"></div>
 <div class="name"></div>
</form>

我无法定位每个div。我应该能够定位第一个和第二个div。对此有任何意见吗？

谢谢！

Answer 1

.eq(i)将解析给定的集合并返回由 i 索引的项目（基于零，因此0是集合中的第一项）。

＆＃13;

$("form").find("div").eq(1).addClass("red");
$("form").find("div").eq(2).addClass("blue");

＆＃13;

div { background-color: yellow; padding: 5px; }
div.red { background-color: red; }
div.blue { background-color: blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
 <div class="name">first div</div>
 <div class="name">second div</div>
 <div class="name">third div</div>
 <div class="name">fourth div</div>
</form>

＆＃13;

Answer 2

如果您正在使用JQuery，那么您可以使用$.each()在没有事件的情况下定位它们：

$('.name').each(function(index) {
    var $this = $(this);

    if (index == 0) {
      // do something for first .name element using $this
    } else if (index == 1) {
      // do something for second .name element using $this
    }

});

如果您想使用.click()事件定位它们，请使用：

// First .name element
$('.name:first-child').click(function(){
   // Do something
});

 // Second .name element
$('.name:nth-child(2)').click(function(){
   // Do something
});

在具有相同类名的div系列中定位div

2 个答案: