méthode positionnelle au lieu du sélecteur dans l'événement jquery

Avez-vous essayé d'utiliser le sélecteur :first-of-type ou :nth-child(1) ? Parce que je crois que c'est ce que vous êtes censé faire.

ÉDITER

Comme les deux :first() et :eq() seront obsolètes, vous pourrez filtrer plus tard.

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

Vous pouvez envisager d'utiliser .closest() et .find() au cas où ils ne seraient pas des nœuds parents ou enfants directs.

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

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

Tout d'abord, cette dépréciation apparaît dans l' avis de publication de jQuery version 3.4.0 daté du 10 avril 2019.

Ils disent:

Tout ce que vous pouvez faire avec des sélecteurs de position, vous pouvez le faire avec des méthodes de position à la place. Ils fonctionnent mieux de toute façon.

D'accord ... Malheureusement , la documentation manque d'explication sur un éventuel remplacement / mise à jour de code concernant l'utilisation de ce pseudo-sélecteur utile dans le scénario de délégation que vous indiquez.

Maintenant, ce n'est qu'une dépréciation ... pas un avis de suppression. Vous n'avez donc pas besoin de mettre à jour votre code pour le moment. La dernière version de jQuery est 3.5.1 (4 mai 2020) et il n'y a pas eu de suppression de :first and similar pseudo-selectors yet.

Je suppose que si vous voulez le rendre excessif de toute façon pour être à l'épreuve du futur , cela donnerait un résultat équivalent:

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

Cela rend le gestionnaire d'événements attaché à #my_div et $this étant l'élément délégué.

Je suis d'accord que c'est moche! Donc je ne ferais pas ça (lol). C'est juste pour souligner qu'il y aura toujours une autre façon de le faire ... Et pour l'instant, c'est le meilleur que je puisse penser en tenant compte de ce que nous avons dans la boîte à outils pas encore obsolète .

y a-t-il un moyen de le faire fonctionner comme avant?

Depuis novembre 2020, vous pouvez utiliser la dernière version de jQuery et l'utiliser :first pseudo-sélecteur en délégation.

Vous pouvez utiliser «: first-child» à la place.

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

si vous manipulez DOM (créez des éléments dynamiquement) il vous suffit d'utiliser .on () sur quelque chose qui est là depuis le début, le sélecteur ne changera pas, par exemple:

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

Il est logique que jquery l'ait changé pour qu'il corresponde également aux pseudo-sélecteurs css.