如何测试这个元素是否是整个文档中第一个 class 的元素？

Question

我在想出加载脚本的条件时遇到了麻烦。

我需要一个条件来识别这个元素是否是整个文档中第一个具有特定 class.

的元素

问题是我已经为一个 phpBB 论坛做了一个 BBCode，我想把所有的脚本放在那里而不是在模板中放一些，但是如果我这样做并且 BBCode 被多次使用在同一页面中，脚本混乱。

例如，这是一个结构：

<div>
 <div>
  <div class="some-other-stuff"></div>
 </div>
</div>

<div>
 <div>
  <div class="youtube"></div>
 </div>
</div>

<div>
 <div>
  <div class="youtube"></div>
 </div>
</div>

我想要它，所以脚本会加载第一个 div 和 "youtube" class。 我还没试过任何事情（是的，那个笨蛋）。

这是我要使用条件的脚本：

<script>
 $(document).ready(function() {
  $(".youtubebbcode_button").click(function() {
   $(this).siblings('.youtubevideo').stop(true, true).slideToggle("medium");
  });
 });
</script>

Answer 1

您可以使用给定 class 测试给定元素是否是文档中的第一个元素，如下所示：

if ($(".someClass").eq(0) === element) {
    // element is the first one in the document with .someClass
}

或者，如果您只想在特定时间点将事件处理程序应用于文档中具有给定 class 名称的第一个元素，您可以只使用 .first() 或.eq(0)直接：

// apply click handler only to first element with a a class
$(".someClass").first().click(function(e) {
    // click handler only for first element
});

或者，如果您的情况是动态的（例如，项目一直被添加到页面中，您只希望点击处理程序在该元素当前是页面中的第一个元素时起作用），那么您可以使用委托事件处理：

$(document.body).on("click", ".someClass", function(e) {
    if ($(".someClass").eq(0) === this) {
        // element clicked is the first one in the document with .someClass
    }
});

Answer 2

如果问题是您为每个实例加载相同的脚本块，您可以在使用 off()

添加之前删除点击处理程序

$(document).ready(function() {
  $(".youtubebbcode_button").off('click').click(function() {
   $(this).siblings('.youtubevideo').stop(true, true).slideToggle("medium");
  });
 });

那么只有最后一个实例会激活点击处理程序

Answer 3

您可以使用 :eq jQuery 选择器，例如：

$('.test:eq(0)').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="test">Test 1</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>

如何测试这个元素是否是整个文档中第一个 class 的元素？

How to test if this element is the first one with its class in the whole document?

html

javascript

jquery

jquery-selectors