Question

我有五个具有相同类名的框，但是一些<div>也有另一个类。例如：

<div class="test one"></div>
<div class="test"></div>
<div class="test two"></div>
<div class="test three"></div>
<div class="test five"></div>

我使用此代码点击.test类的框，但它会点击所有框：

$('.test').click();

如何模拟仅 具有<div>班级名称的第二个.test，而不是更多？

Answer 1

您可以使用attr返回所有课程并检查长度

＆＃13;

$('.test').click(function() {
  var c = $(this).attr('class').split(' ').length;
  if (c == 1) {
    $(this).css('background', 'blue');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test one">Lorem ipsum dolor.</div>
<div class="test">Lorem ipsum dolor.</div>
<div class="test two">Lorem ipsum dolor.</div>
<div class="test three">Lorem ipsum dolor.</div>
<div class="test five">Lorem ipsum dolor.</div>

＆＃13;

如果您始终只想使用test课程定位div，无论您点击哪一个，都可以执行此操作Fiddle

Answer 2

最简单的解决方案是使用CSS属性选择器选择 只有一个 类的元素：

$('[class="test"]').click();

$('[class="test"]').click(function() {
  $(this).css('background', 'blue');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test one">Lorem ipsum dolor.</div>
<div class="test">Lorem ipsum dolor.</div>
<div class="test two">Lorem ipsum dolor.</div>
<div class="test three">Lorem ipsum dolor.</div>
<div class="test five">Lorem ipsum dolor.</div>

模拟按类名

2 个答案: