Улучшение Jquery Parent Child Selector - PullRequest
Новая
       27

Улучшение Jquery Parent Child Selector

1 голос
/ 06 июля 2011

Я изучаю 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');
}

Есть ли лучший способ выбора родительского элемента, а не второго набора дочерних элементов для объекта, на который щелкнули, чем этот?

Спасибо

Джо

Ответы [ 2 ]

2 голосов
/ 06 июля 2011

Я бы предложил использовать: 

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

closest() выполняет поиск элементов-предков для первого элемента, который соответствует предоставленному селектору;find() ищет в дочерних элементах элементы, соответствующие указанному селектору.

Хотя closest() возвращает только одно совпадение ( ближайший / * первый * элемент, соответствующий селектору), это важноотметить, что find() может возвращать несколько элементов.

Ссылки:

1 голос
/ 06 июля 2011

Использовать 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();

Я не уверен, что именно вы ищете здесь ...

...