Utilisation de next()

Bonjour tout le monde,


J'ai un petit soucis avec l'utilisation de next(), je vous explique:

Voici mon code HTML:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<form action="index.php?page=trade]" method="POST">   Quantité: <input type="text" class="nb_vsx" name="nb_unite" value="XXX" />   <input type="hidden" name="flt_action_buy" value="XXX" /> <input type="hidden" class="price_unt" value="XXX"/> <input type="submit" value="Annuler la vente"/>   </form>

---

Ce que je voulais faire: quand l'utilisateur termine de rentrer un nombre dans l'input qui a pour class "nb_vsx", on aille chercher la valeur du champs caché qui a pour class "price_unt".

Sachant que ce bout de code se répète en boucle X fois dans la page.

J'ai commencé à écrire:

Code:

---

1 2 3 4 5 6 7 8 9

$('.nb_vsx').live("keyup", function(){     //on récupère la valeur du champs (price_unt) qui suit var price = $(this).next(".price_unt").val();   alert(price); });

---

Le soucis, c'est que l'alert me sort: "Undefinited".

Je ne sais pas ou ça coince, peut ètre me suis-je trompé sur le fonctionnement de next().

Quelqu'un aurait une idée pour m'aider ?

Merci d'avance,


kasou

Il me semble que next() c'est pour l'élément qui suit juste après, quel qu'il soit. Le selecteur sert alors juste à déterminer la nature de cet élément.

Essaye ceci :

Code:

---

var price = $(this).nextAll(".price_unt:eq(0)").val();

---

Ici on considère toutes les classes ".price_unt" et on traite la première d'entre elles grâce au eq() (enfin en théorie...).

Salut _concept_ , merci pour ta réponse, mais il me dit toujours que price n'est pas défini :(

Jouer avec next n'est pas très robuste, à la moindre modification de ton HTML, ton Javascript ne fonctionnera plus. Donne plutôt des id à tes éléments...

.find() ?

Citation:

---

Envoyé par _concept_

var price = $(this).nextAll(".price_unt:eq(0)").val();

---

.nextAll() sélectionne tous les nœuds suivants, puis applique le filtre. Ici, :eq(0) correspond au flt_action_buy, ce qui, intersecté avec .price_unt donne un résultat vide.

Il suffit de faire :

Code:

---

var price = $(this).nextAll(".price_unt").val();

---

;)

Salut tout le monde, merci pour vos réponses.

J'ai essayé ce que propose Watilin:

Code:

---

var price = $(this).nextAll(".price_unt").val();

---

Et ça marche nickel :D , par contre si je place un div comme ceci:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<form action="index.php?page=trade]" method="POST">   Quantité: <input type="text" class="nb_vsx" name="nb_unite" value="XXX" /> <div> <input type="hidden" name="flt_action_buy" value="XXX" /> <input type="hidden" class="price_unt" value="XXX"/> <input type="submit" value="Annuler la vente"/> </div>   </form>

---

La variable price sera indéfini, je ne comprend pas pourquoi.

EDIT: j'ai trouvé une solution:

Code:

---

var price = $($(this).nextAll("div")).children(".price_unt").val();

---

kasou

Citation:

---

Envoyé par kasoutami

EDIT: j'ai trouvé une solution:

Code:

---

var price = $($(this).nextAll("div")).children(".price_unt").val();

---

kasou

---

Un peu plus simple ^^

Code:

---

var price = $(this).nextAll("div").children(".price_unt").val();

---

;)

Ha cool, j'écris toujours du code à rallonge ^^ , merci.


kasou

Bonsoir

Citation:

---

Envoyé par _concept_

Il me semble que next() c'est pour l'élément qui suit juste après, quel qu'il soit. Le selecteur sert alors juste à déterminer la nature de cet élément.

Essaye ceci :

Code:

---

var price = $(this).nextAll(".price_unt:eq(0)").val();

---

Ici on considère toutes les classes ".price_unt" et on traite la première d'entre elles grâce au eq() (enfin en théorie...).

---

Même si kasoutami n'a pas réussi à la mettre en oeuvre, la solution et le code donné par _concept_ est tout a fait correct (j'ai testé pour en être certain).

En l'adaptant à l'insertion d'une division :

Code:

---

var price = $(this).next().children(".price_unt:eq(0)").val();

---

ou

Code:

---

var price = $(this).next().children(".price_unt:first").val();

---

On sélectionne l'élément suivant (div) puis dans ses fils (children), tous les éléments (nextAll) ayant la classe ".price_unt". Mais on ne retient que le premier d'une éventuelle série.

La critique et l'explication de Watilin,

Citation:

---

Ici, :eq(0) correspond au flt_action_buy

---

, est erronée.

@Dany
Autant pour moi alors, j’ai dû encore confondre le sélécteur :eq(0) (ou :first comme tu le fais remarquer) avec la méthode .first(). C’est bien :first qui repère la position dans le DOM et .first() dans la collection de nœuds renvoyée, et pas le contraire.

Mais alors, pourquoi la solution de _concept_ ne marchait pas ?

Bonsoir.

Tout le monde peut commettre une erreur, moi le premier. :oops:

Mais il est toujours bon et bien de rendre à César ce qui appartient à Jules.

Avec Firefox et Firebug, si je fais :

Code:

---

1 2 3 4 5

$(function(){ console.log($("div")); console.log($("div").first()); console.log($("div:first")); });

---

Je sélectionne toujours la première division qui, avec Firebug, est div#_firebugConsole

Citation:

---

Mais alors, pourquoi la solution de _concept_ ne marchait pas ?

---

Seul kasoutami peut répondre à votre question, mais il toujours possible que le code de sa question et son code réel aient été légèrement différents.