jquery 事件中的位置方法而不是选择器

Question

我正在捕捉这样的自定义事件：

$("#my_div").on("custom_event", ".some_class:first", function...

工作正常。问题是因为 jQuery 3.4 is deprecating :first 选择器（以及其他），我想做一些像

$("#my_div").on("custom_event", $(".some_class").first(), function...

但这行不通，因为 the selector parameter must be a string。在我的例子中，事件是在第一个事件之外的第二个、第三个等等捕获的。我只需要在第一时间被捕获。

如何更新代码？我想避免和 if 语句来测试位置，有没有办法让它像以前一样工作？

Answer 1

您尝试过使用 :first-of-type 或 :nth-child(1) 选择器吗？因为我相信那是你应该做的。

Answer 2

编辑

因为 :first() 和 :eq() 都将被弃用，您可以稍后过滤。

$("#my_div").on("custom_event", ".some_class", function(e){
  var target = $(this).parent().children().first();
});

如果它们不是直接父节点或子节点，您可以考虑使用 .closest() 和 .find()。

$(function() {
  $(".container").on("click", ".item", function(e) {
    var target = $(this).closest(".container").find(".item").first();
    console.log(target.text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Answer 3

首先，该弃用出现在日期为 2019 年 4 月 10 日的 jQuery version 3.4.0 release notice 中。

他们说：

Anything you can do with positional selectors, you can do with positional methods instead. They perform better anyway.

好的...遗憾的是，文档缺少对可能代码的解释 replacement/upgrade 关于在您指出的委托场景中使用这个有用的伪选择器.

现在，那只是 deprecation... not a removal notice. So you don't actually have to upgrade your code for now. The latest jQuery version is 3.5.1（2020 年 5 月 4 日）并且还没有删除 :first 和类似的伪选择器。

我想如果你想让它变得过分杀伤力面向未来，这将给出等效的结果：

$("#my_div").on("custom_event", function(e){
  let $this = $(e.target).closest("#my_div").find(".some_class").eq(0)
  
  $this.doSomethingElseHere()
  //...
})

这使事件处理程序附加到 #my_div 并且 $this 成为委托元素。

我同意那很丑！ 所以我不会那样做（笑）。只是要指出总会有另一种方法来做到这一点......现在，考虑到我们在尚未 deprecated 工具集中拥有的东西，这是我能想到的最好的方法.

is there a way to make it work like before?

截至 2020 年 11 月，您可以使用最新的 jQuery 版本并在委托中使用那个 :first 伪选择器。

Answer 4

您可以改用':first-child'。

$("#my_div .some_class:first-child").on("custom_event", function(){
   // code 
)};

如果您正在操作 DOM（动态创建元素），您只需对从一开始就存在的内容使用 .on()，选择器不会改变，例如：

$(document).on('custom_event', "#my_div .some_class:first-child",function(){
  // code
})

jquery 更改它是有道理的，因此它与 css 伪选择器匹配。

jquery 事件中的位置方法而不是选择器

positional method instead of selector in jquery event

jquery

jquery-selectors