Найти ребенка из родной брат - JQuery

Question

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

<div class="clickMe" data-videourl="http://yt.com/123/">click</div> 
<div class="somethingElse">blah</div> 
<div class="showVideo"> 
    <iframe class="ytVideo" src=""></iframe> 
</div> 

Что мне нужно сделать, это принять значение data-videourl из .clickMe и добавить его это .ytVideo

Это то, что я м пытается но src не быть установлен:

$('.clickMe').on("click", function() { 
    var videoURL = $(this).data('videourl'); 
    alert(videoURL); <-- a test, this works fine, the data is there 
    $(this).next('.showVideo').find('.ytVideo').attr('src',videoURL); 
}); 

Answer 1

JQuery-х .next() частые поездки людей вверх. Он не находит следующего брата всех братьев и сестер, которые соответствуют выбранному вами селектору. Вместо этого он выглядит ТОЛЬКО у следующего брата, чтобы узнать, соответствует ли он этому селектору. Это, очевидно, не будет делать то, что вам нужно.

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

<div class="container"> 
    <div class="clickMe" data-videourl="http://yt.com/123/">click</div> 
    <div class="somethingElse">blah</div> 
    <div class="showVideo"> 
     <iframe class="ytVideo" src=""></iframe> 
    </div> 
</div> 

$('.clickMe').on("click", function() { 
    var videoURL = $(this).data('videourl'); 
    $(this).closest(".container").find('.ytVideo').attr('src',videoURL); 
}); 

---

Вы также можете использовать .nextAll() собрать все братья и сестры, которые следуют за ваш элемент, соответствующие заданному селектору.

$('.clickMe').on("click", function() { 
    var videoURL = $(this).data('videourl'); 
    $(this).nextAll(".showVideo").find('.ytVideo').attr('src',videoURL); 
}); 

---

Преимущества использования общего родителя и .closest() является то, что он в меньшей степени зависит от точной структуры вашего HTML (и, следовательно, менее ломкий изменить в HTML). Все, что требуется, это то, что целевой объект находится где-то внутри общего родителя. Вот почему использование этого типа ошибки .closest(), а затем .find() для этого общего родителя. Промежуточные div могут быть добавлены в факультативные изменения презентации, и код будет продолжать работать. Это не обязательно верно с .nextAll(), так как целевой div должен оставаться на ровном уровне, а не только в общей ветви.

Разница в производительности между .find() в филиале и .nextAll() на уровне брата редко бывает значимой для любой операции, вызванной щелчком пользователя, поэтому имеет смысл кодировать надежность.

Answer 2

Далее следует возвращать неимоверного брата (.somethingElse) и который не соответствует селектору.

Измените его на nextAll(), чтобы выбрать все из них, а затем возьмите тот, который вы хотите, с помощью селектора.

$('.clickMe').on("click", function() { 
    var videoURL = $(this).data('videourl'); 
    alert(videoURL); <-- a test, this works fine, the data is there 
    $(this).nextAll('.showVideo').find('.ytVideo').attr('src',videoURL); 
}); 

Вот документация: https://api.jquery.com/nextAll