Селектор jQuery: какую комбинацию селекторов jQuery следует использовать для изменения текста между тегами span

Question

У меня есть следующий HTML:

<tr>
  <td>
    <img id='1' class='promote' src='/images/plus.png' />
    <span>0</span>
    <img id='1' class='demote' src='/images/minus.png' />
  </td>
  <td>
    <img id='2' class='promote' src='/images/plus.png' />
    <span>0</span>
    <img id='2' class='demote' src='/images/minus.png' />
  </td>
...
</tr>

Далее я использую jQuery ajax:

$('img.promote').click(function() {
  $.ajax({
    url: '/promote/' + this.id,
    success: function(data) {
      $(???).text(data.rating);
    },
    dataType: 'json'
  });
});
$('img.demote').click(function() {
  $.ajax({
  url: '/demote/' + this.id,
  success: function(data) {
    $(???).text(data.rating);
  },
  dataType: 'json'
  });
});

Итак, какую комбинацию селекторов jQuery я должен использовать вместо "???" изменить текст между тегами span? или я все делаю неправильно?

Answer 1

Вам нужно кэшировать диапазон в обработчике кликов

$('img.promote').click(function() {
  var $span = $(this).siblings('span');
  $.ajax({
    url: '/promote/' + this.id,
    success: function(data) {
      $span.text(data.rating);
    },
    dataType: 'json'
  });
});