位置方法而不是 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-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 伪选择器相等。

Answer 2

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

他们说：

任何你可以用位置选择器做的事情，你都可以用位置方法来代替。无论如何，它们的表现更好。

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

现在，这只是 deprecation... 不是删除通知。所以你现在实际上不需要升级你的代码。最新的 jQuery 版本是 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 的事件处理程序成为委托元素。

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

有没有办法让它像以前一样工作？

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

Answer 3

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

Answer 4

编辑

: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>