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()之间的性能差异对于用户点击触发的任何操作都很少有意义，因此编写健壮性是有意义的。

找到兄弟姐妹的孩子 - jQuery

1 个答案: