Jquery父子选择器改进答案

【问题标题】：Jquery Parent Child Selector ImprovementJquery父子选择器改进
【发布时间】：2011-07-05 22:01:50
【问题描述】：

我正在学习 Jquery，希望能做得更好。找到了解决办法，想看看有经验的老手是怎么做的……如果有更多的口才，可以这么说。

问题是我有一个位于表格行中的小部件。该小部件与所有其他 20 个小部件具有相同的类。当有人点击一个特定的小部件时，只有那个小部件应该改变。

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

这是我对 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');
}

有没有比这更好的方法来选择父母然后第二组孩子到点击的对象？

谢谢

乔

【问题讨论】：

标签： jquery jquery-selectors parent

【解决方案1】：

我建议使用：

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

closest() 在祖先元素中搜索与提供的选择器匹配的第一个元素； find() 在后代元素中搜索与提供的选择器匹配的元素。

虽然closest() 只返回一个匹配项（与选择器匹配的最接近/*first* 元素），但请务必注意find() 可能返回多个元素。

参考资料：

closest()。
find()。

【讨论】：

.closest() 就像一个魅力！感谢您的差异方法。我正在使用它。 -- 乔
不客气！我很高兴能帮上忙=）我建议如果这个或另一个答案解决了你的问题，你应该考虑接受（点击答案旁边的勾号）或投票（点击左边的向上箭头） .这不是强制性的，但受到社区的欢迎。
我点击了复选标记，它变成了绿色。我还没有获得投票赞成或反对的地位。但是当我这样做时......乔

【解决方案2】：

使用 find()？所以：

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

变成：

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

我不确定你在这里寻找什么...

【讨论】：