javascript - CSS - 父子选择器不工作

Question

我有以下代码:

.recipe
  .ingredients
    = f.simple_fields_for :ingredients do |ingredient|
      = render 'ingredient_fields', f: ingredient
  .row#links
    .col-xs-12
      = link_to_add_association "", f, :ingredients
  %hr

我需要使用 jquery 以 $("#links")["closest"](".recipe > .ingredients") 的格式选择成分 div，但这不会选择任何东西。

这令人沮丧，因为 $("#links")["closest"](".recipe > .row") 将返回正确的 div。

什么有效和我想要什么:https://jsfiddle.net/yL6dr4s1/

Answer 1

根据 jQuery 文档，closest方法尝试通过测试 元素本身来找到与选择器匹配的元素，并且通过 DOM 向上遍历。

它不通过元素的 sibling 。

根据您的要求，您似乎想要遍历树以获得 sibling 的匹配。 jQuery 有 siblings方法来做到这一点。因此，一种解决方案是使用 siblings 方法，例如:

$("#links")["siblings"](".recipe > .ingredients")

另一个想法是找到最亲近的 parent ，然后使用@mhodges 回答的 child

至于查询$("#links")["closest"](".recipe > .row"):

它工作正常，因为 closest 方法在元素本身中找到匹配项。

这是展示这一点的例子:

$(document).ready(function() {
  // Match found because it is parent
  console.log($("#links")["closest"](".wrapper").length);
  // No match found because element is sibling
  console.log($("#links")["closest"](".row1").length);
  // No match found because element is sibling
  console.log($("#links")["closest"](".row3").length);
  // Match found because it is element itself
  console.log($("#links")["closest"](".row2").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row1">
    <span>Content1</span>
  </div>
  <div class="row2" id="links">
    <span>Content2</span>
  </div>
  <div class="row3">
    <span>Content3</span>
  </div>
</div>