Javascript 如何测试此元素是否是整个文档中第一个具有其类的元素？

我很难想出一个加载脚本的条件

我需要一个条件，可以识别此元素是否是整个文档中具有特定类的第一个元素。

问题是，我已经为一个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>

我想要它，这样脚本就可以加载“youtube”类的第一个div了。我还没有尝试过任何东西（是的，那是毫无头绪的）

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

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

$（文档）.ready（函数（）{
$（“.youtubebbcode_按钮”）。单击（函数（）{
$（this）.兄弟姐妹（'.youtubevideo'）.stop（true，true）.slideToggle（“中”）；
});
});

---

您可以测试给定元素是否是文档中具有如下给定类的第一个元素：

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

或者，如果您只想在特定时间点将事件处理程序仅应用于文档中具有给定类名的第一个元素，则可以直接使用

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

---

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

off（）

然后只有最后一个实例会激活单击处理程序。您可以使用jQuery选择器，例如：

$（'.test:eq（0）'）.css（'color'，'red'）

测试1
测试2
测试3
不确定我是否理解该问题，但您可能正在寻找和/或。从头到尾通读是值得的。这需要一个小时，可能需要两个小时，并且会立即回报您。这是否意味着您要多次加载同一个脚本块？
$（“.youtube:first”）。something（）
将在文档的第一个
class=“youtube”
元素上调用
something
。@charlietfl Yes。“youtube”类的每个div中都有相同的脚本。我希望脚本只加载第一个脚本，但它适用于所有脚本：first将使脚本仅对该类的第一个元素起作用，这不是我想要的。您需要某种方法来跟踪php，或者使用我下面提供的解决方案，这是可行的。我甚至不知道这是另一种选择。使用委托事件处理程序实际上会更干净，然后您只会在后端包含它一次
$(document).ready(function() {
  $(".youtubebbcode_button").off('click').click(function() {
   $(this).siblings('.youtubevideo').stop(true, true).slideToggle("medium");
  });
 });