Amélioration du sélecteur d'enfant parent Jquery

Question

J'apprends Jquery et espère faire mieux. J'ai trouvé une solution, et je veux voir comment un ancien combattant aguerri le ferait ... S'il y a plus d'éloquence, pour ainsi dire.

Le problème est que j'ai un widget qui repose dans une ligne de table. Le widget a les mêmes classes que tous les autres 20 widget. Quand quelqu'un clique sur un widget particulier, seul ce widget devrait changer.

Voici le HTML:

<div class="deal-widget"> 
    <div class="deal-widget-left"> 
    <div class="deal-widget-left-countdown"> 
     <span class="totalcoupons">500</span> of <span class="maxcoupons">500</span> 
    </div> 
    <div class="deal-widget-left-remain"> 
     Remaining 
    </div> 
    </div> 
    <div class="deal-widget-right is_open"> 
    <a href="/deal/claim/1113" class="deal-link">Claim It!</a> 
    </div> 
</div> 

Voici mon coup de couteau au JQuery:

Drupal.behaviors.plusone = function (context) { 
    $('a.deal-link:not(.deal-processed)', context).click(function() { 
    var parent = $(this).parents('div.deal-widget'); 
    var originalVote = parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').text(); 
    var originalVoteInt = parseInt(originalVote); 
    var voteSaved = function (data) { 
     parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').html(originalVoteInt - data.total_votes); 
     parent.children('div.deal-widget-right').html(data.voted); 
     parent.children('div.deal-widget-right').removeClass('is_open').addClass(data.votedClass); 
    } 
    $.ajax({ 
     type: 'POST', 
     url: this.href, 
     dataType: 'json', 
     success: voteSaved, 
     data: 'js=1' 
    }); 
    return false; 
    }) 
    .addClass('deal-processed'); 
} 

Y at-il une meilleure façon de sélectionner des parents alors deuxième ensemble d'enfants à un cliqué sur l'objet que celui-ci ?

Merci

Joe

Answer 1

Je suggère d'utiliser:

var parent = $(this).closest('div.deal-widget'); 
var originalVote = parent.find('span.totalcoupons').text(); 

closest() recherches les éléments ancêtres pour le premier élément qui correspond au sélecteur prévu; find() recherche dans les éléments descendants ceux qui correspondent au sélecteur fourni.

Alors que closest() retours qu'un seul match (l'élément le plus proche /* premier * qui correspond au sélecteur) il est important de noter que find() peut renvoyer plusieurs éléments.

---

Références:

• closest().
• find().

Answer 2

Utilisez find()? Alors:

var originalVote = parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').text(); 

devient:

var originalVote = parent.find('span.totalcoupons').text(); 

Je ne sais pas exactement ce que vous cherchez ici ...