3
votes

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

J'attrape un événement personnalisé comme celui-ci:

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

Cela fonctionne bien. Le fait est que parce que jQuery 3.4 est obsolète :first sélecteur (entre autres), je voudrais faire quelque chose comme

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

Mais cela ne fonctionne pas car le paramètre selector doit être une chaîne . Dans mon cas, l'événement est capturé le deuxième, le troisième, etc. en plus du premier. Je n'ai besoin d'être capturé que le premier.

Comment puis-je mettre à jour le code? Je voudrais éviter et si déclaration pour tester la position, y a-t-il un moyen de le faire fonctionner comme avant?


8 commentaires

Qu'en est-il de $ ("# my_div"). Children (". Some_class"). First (). On ("click", function ..?


ou $("#my_div .some_class").eq(0).on("click", function...


Créez la page à laquelle vous avez lié "Gardez à l'esprit que nous prendrons toujours en charge les méthodes de positionnement, telles que .first, .last et .eq. Tout ce que vous pouvez faire avec les sélecteurs de position, vous pouvez le faire avec des méthodes de position à la place. Elles fonctionnent quand même mieux. . "


Vous ne pouvez pas utiliser .first() ou .eq() dans .on() . Il doit s'agir d'un sélecteur: une chaîne de sélecteur pour filtrer les descendants des éléments sélectionnés qui déclenchent l'événement. Si le sélecteur est null ou omis, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné.


@VSMent qui a l'air bien


@johnSmith J'aime aussi cette approche


@Twisty oui, j'en suis conscient, je l'ai même dit dans ma question


@ MatíasCánepa a compris cela, merci. Réponse mise à jour.


4 Réponses :


0
votes

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.


0 commentaires

0
votes

É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();
});


1 commentaires

:eq est dans la liste des dépréciations avec :first dans la note de publication 3.4.0 OP mentionné ...;)



1
votes

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.


0 commentaires

1
votes

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.


3 commentaires

Si .some_class sont des éléments créés dynamiquement, cela ne fonctionnera pas. Si ceux-ci sont statiques ... eh bien. OP fait juste des délégations inutiles (peut-être!)


ce n'est pas un problème si vous utilisez .on () sur quelque chose qui existe depuis le début, regardez ma mise à jour


@johnSmith étant donné quelques nuances dans mon code, la version eq () fonctionne comme prévu, aussi la version first () comme commenté par VSMent