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文檔， 最接近的方法嘗試通過測試元素本身並遍歷DOM來查找匹配選擇器的元素 。

它沒有通過元素的兄弟姐妹。

根據您的要求，您似乎想要遍歷樹以獲得兄弟姐妹的匹配。 jQuery有兄弟姐妹方法來做到這一點。 所以一種解決方案是使用兄弟姐妹方法，如：

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

另一個靈魂將是獲得最親近的父母，然后使用@mhodges回答的孩子

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

它工作正常，因為最接近的方法在元素本身中找到匹配。

以下是展示以下內容的示例：

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

Answer 2

我不確定您使用您提供的確切選擇器/語法的要求，但此選擇器的工作方式與您的要求完全相同。

$(this).closest(".recipe").children(".ingredients").append('<br/><input type="text" value="Flour">');

編輯

這是我能得到的最接近的：

$(this)["closest"](".recipe").children(".ingredients").append('<br/><input type="text" value="Flour">');

Answer 3

我認為你不能像你提出的那樣使用選擇器。

就DOM而言（和jQuery），由ingredient定義的元素和由row定義的元素是不相關的。 你必須遍歷到父元素，然后返回到孩子。

這是一個小提琴 ，希望能夠證明這個問題。

如果您可以更改它以使ingredient和row在同一個父div中，那么您的測試選擇器語法可能會更幸運。

Answer 4

當jQuery遇到錯誤，沒有某個選項或只是變得凌亂用於某個操作時，我們也可以訪問好的舊的普通javascript。

 document.querySelector('#addToIngredients').addEventListener('click' , function(e) { var recipe = getClosest(e.target,'recipe'); if (recipe) { var ingred = recipe.querySelector('.ingredients'); ingred.innerHTML += '<br/><input type="text" value="Flour">'; } }); function getClosest(elem,cls) { var el = elem.parentNode; while (el){ if (el.className.indexOf(cls) > -1) { return el; } el = el.parentNode; } return false; } 

 <div class="recipe"> <div class="ingredients"> <input type="text" value="Eggs"><br/> <input type="text" value="Flour"> </div> <div class="row"> <div class="col-xs-12"> <a href="#" id="addToIngredients">Add to .ingredients</a> </div> </div> <hr/> </div> 

當然，他們可以合並

$(function() {
    $("#addToIngredients").on('click', function(e) {
      var recipe = getClosest(e.target,'recipe');  
      if (recipe) {
        var ingred = recipe.querySelector('.ingredients');
        ingred.innerHTML += '<br/><input type="text" value="Flour">';
      }
  });
})