查找兄弟的孩子 - jQuery的

我有以下HTML結構：查找兄弟的孩子 - jQuery的

<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>

我需要做的是從.clickMe採取data-videourl值，並將其添加它.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); 
});

來源

2015-05-03 Darren Sweeney

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()之間的性能差異對於用戶點擊觸發的任何操作來說很少有意義，因此編碼魯棒性很有意義。

來源

2015-05-03 09:27:28 jfriend00

感謝這個，你會說'最近（）'是比'nextAll（）'因爲它僅尋找一個更好的選擇？我會想到更快，更經濟？ –

@DarrenSweeney - 查看我添加到我的答案的最後一段。 – jfriend00

'最接近'尋找祖先，而不是兄弟姐妹。這意味着你也需要使用'find'。如果沒有別的，更多的寫。 – Krycke

接下來只返回immidiate兄弟（.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

來源

2015-05-03 09:28:24 Krycke

查找兄弟的孩子 - jQuery的

回答

相關問題