Selection problems with multiple elements
Although Jquery offers multiple ways in selecting DOM elements, I
can't figure out how to do this, as i'm not that good at it.
Here's the deal :
my html goes like this
<logic:iterate id="ligneCommande" name="commande"
property="lignesCommande" indexId="index">
<div class="ligneArticle"><c:set var="nbLigneCommandes"
value="${nbLigneCommandes+1}" /> <bean:define id="articleId"
name="ligneCommande" property="article.id" />
<div class="blocGauche"><bean:define id="articleId"
name="ligneCommande" property="article.id" />
<img class="visuelArticle" src="/images/visuelsArticles/dim1/$
{ligneCommande.article.articleReference.reference}_dim1.jpg"
height="60" width="60" />
<span class="libelleArticle"> <bean:write
name="ligneCommande"
property="article.articleReference.libelle" />
</span>
</div>
<div class="blocDroit">
<span class="prixUnitaire">
<bean:write
name="ligneCommande" property="prixUnitaire" format=""
formatKey="main.format.prix"/>
<input type="hidden" class="prixProduit" name="prix${index}"
value="${ligneCommande.prixUnitaire}"></input>
<input type="hidden"
name="montantDeLigne${index}" value="$
{ligneCommande.prixTotal}"></input>
</span>
<table class="calculette">
<tr>
<td>
<html:text styleClass="quantite"
property="quantiteLigneCommande(${ligneCommande.id})" styleId="$
{ligneCommande.id}"/>
</td>
<td>
<img class="plus" src="/images/quantiteIncrement.gif"
alt="Plus" />
</td>
<td>
<img class="moins" src="/images/quantiteDecrement.gif"
alt="Moins" />
</td>
</tr>
</table>
<div id="montantDeLigneAfficher${index}" class="prixTotal">
<bean:write name="ligneCommande" property="prixTotal" format=""
formatKey="main.format.prix" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</logic:iterate>
As you can see, I iterate on each line, that's named .ligneArticle ;
What I wish to do is, on click on
<img class="plus" src="/images/quantiteIncrement.gif" alt="Plus" /> or
<img class="moins" src="/images/quantiteDecrement.gif" alt="Moins" />,
traverse back up from my button, in order to get it's current (and
unique) lingneArticle, to get back down and work on quantity input.
Right now, my js looks likes this :
$(".plus").click(function (){
var quantite = $("this ~ .quantite").val();
quantite++;
if (quantite<=0){
quantite=0;
}
$("this ~ .quantite")
.text(quantite)
.val(quantite);
calculMontantPanier();
});
$(".moins").click(function (){
var quantite = $(this).find(".quantite:input").val();
quantite--;
if (quantite<=0){
quantite=0;
}
$(this).find(".quantite:input")
.text(quantite)
.val(quantite);
calculMontantPanier();
});
As you can see, my probleme is related to DOM crawling back up from $
(this) (my button), and then down to it's direct
neigbour .quantite:input .
Thanks for your help.