jQuery each() или (this) для отображения/hide toggle

Question

У меня есть много примеров .wwd-extra-content-trigger и .wwd-extra-content на странице, каждая в пределах .wwd-content-each div.

Я пытаюсь написать код, поэтому, если вы нажмете на курок, он расширяет только дополнительный контент внутри wwd-content-each. В настоящее время, если вы делаете это с моим текущим кодом, он расширяет весь дополнительный контент при нажатии, а не сам. Я знаю, что мне нужно использовать каждый (это) или каждый(), но я не уверен, где.

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) { 
    jQuery('span', this).text($('span', this).text() == 'navigateup' ? 'navigatedown' : 'navigateup'); 
    jQuery('.wwd-extra-content').fadeToggle(); 
}); 

Спасибо заранее, R

Answer 1

Изменить это:

jQuery('.wwd-extra-content').fadeToggle(); 

к этому:

jQuery(this).closest('.wwd-content-each').find('.wwd-extra-content').fadeToggle(); 

Это, скорее всего, может быть оптимизирован, если вы также показать немного соответствующего HTML.

Answer 2

$(this).parent().find('.wwd-extra-content').fadeToggle() 

должен сделать трюк. Или вы можете использовать closest.

Answer 3

В зависимости от точного расположения HTML, вы можете использовать либо это:

$('.wwd-extra-content-trigger').click(function(e) { 
    $(this).siblings('.wwd-extra-content').fadeToggle(); 
}); 

или это:

$('.wwd-extra-content-trigger').click(function(e) { 
    $(this).closest('.wwd-content-each').find('.wwd-extra-content').fadeToggle(); 
}); 

Первая версия предполагает, что триггер содержание и содержание являются дети одного и того же HTML-элемент; вторая версия предполагает, что у них есть общий предок .wwd-content-each.