Можно ли упростить этот фрагмент Javascript с помощью jQuery?

Question

У меня есть следующий фрагмент Javascript, который просто прикрепляет кнопку к кнопке и затем обновляет текст тега em под ней. Я медленно пытаюсь учиться и больше работать с jQuery, так как я обнаружил, что синтаксис мне нравится больше, а для некоторых задач работать с ним приятнее.

Некоторые из лучших примеров, которые я нашел, взяты из Stackoverflow, поэтому я прихожу еще раз, чтобы посмотреть, как это можно изменить и улучшить с помощью jQuery; есть мысли?

$$('em.green').each(function(em) { 
  em.up('button').onclick = function() { 
    em.update('Saving...') 
  }; 
});

Спасибо!

Answer 1

Попробуйте, немного короче:

$('button').click(function(i, button) { 
  $(button).closest('em.green').html('Saving...');
});

Спасает вас от необходимости проходить через все EM и затем связывать onclick. Может также помочь добавить класс к кнопке, чтобы не привязывать ни одну кнопку на странице, на случай, если есть другие.

Answer 2

Вот построчный перевод вашего кода прототипа. Не сильно отличается:

$('em.green').each(function(i, em) {
    $(em).closest('button').click(function() { 
        $(em).html('Saving...') 
    })
});

ИМО версия прототипа выглядит так же хорошо, если не лучше (без $ повсюду).

Answer 3

Это немного короче и может быть проще для понимания, но дублирует селектор "em.green".

$('button:has(em.green)').click(function() {
    $(this).find('em.green').html('Saving...');
});

ответ crescentfresh также хорош и не требует поиска элемента em каждый раз. Влияние на производительность не должно быть заметным, поскольку у вас, вероятно, нет большого дерева элементов под кнопкой.

Answer 4

Ответ Мэтью Крамли хорош, но зачем подключать несколько обработчиков, когда один будет делать.

Дополнительным преимуществом является то, что это также будет работать, если вы создадите какие-либо элементы em.green позже в течение срока службы документа.

$('button:has(em.green)').live('click', function(){
  $(this).find('em.green').html('Saving...')
});

Answer 5

(я не могу редактировать, поэтому мне придется создать новый ответ, но:)

немного короче:

$('button').click(function() { 
  $(this).closest('em.green').html('Saving...');
});

Избавляет вас от необходимости проходить через все EM и затем связывать onclick. Может также помочь добавить класс к кнопке, чтобы вы не привязывались к каждой кнопке на странице, на случай, если есть другие.

Нет необходимости включать параметры функции, используйте переменную this, чтобы указать контекст, для которого вы хотите найти ближайшего родителя.