我有以下代码：CSS - 家长孩子选择不工作

.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

我需要选择的$("#links")["closest"](".recipe > .ingredients")格式使用jQuery的成分DIV但这不选择任何内容。

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

捣鼓什么工作，我想：https://jsfiddle.net/yL6dr4s1/

来源

2016-03-15 Josh Luke Blease

你能不能给我们呈现的HTML是什么样的想法？也许JSFiddle的例子？ – Seano666

@ Seano666对不起，我忘了加入一个链接，我已经添加了！ - https://jsfiddle.net/yL6dr4s1/ –

是你的问题关于jquery或关于如何喂这个选择器到茧？ – nathanvda

根据jQuery文档，closest方法试图通过测试元素本身和向上遍历查找元件选择器匹配通过DOM。

它不通过元素的兄弟姐妹。

根据你的要求，你似乎想要遍历树来获得兄弟姐妹的匹配。 jQuery有siblings方法来做到这一点。所以，一个解决办法是用兄弟姐妹方法，如：

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

另一个soultion将得到最接近的父母，然后使用儿童通过@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>

来源

2016-03-15 18:19:40 Chitrang

天才！这工作，非常感谢你！ –

欢迎您！ – Chitrang

我不知道的关于使用您提供准确的选择/语法您的要求，但这个选择的工作原理完全你如何想它。

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

编辑

这是最接近我能得到：

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

来源

2016-03-15 16:06:37 mhodges

要求是，我在轨道中使用称为茧的宝石嵌套字段。源代码使用这种语法，我试图解决如何使用它而无需修改。 –

@JoshLukeBlease Gross。好吧，我会继续使用给定的语法来处理它。感谢您的澄清！ – mhodges

@JoshLukeBlease Idk告诉你什么人，[“最接近的”]（“。recipe> *”）只返回.row div，但[“closest”]（“。recipe”）。children（）返回.reredients和.row divs。我无法在任何地方找到[“最接近的”]的文档，因此我不完全确定它在做什么。表面上看起来它和.closest（）做同样的事情，但它只允许特定的组合选择器，并且表现得非常奇怪。你已经正式让我难住了！ – mhodges

我不认为你可以在你的求婚方式使用选择。就DOM而言（和jQuery），ingredient定义的元素和row定义的元素是无关的。您必须遍历到父元素，然后再返回到孩子。

Here is a fiddle希望能证明这个问题。

如果您可以更改它以便ingredient和row都在同一个父div中，那么您的测试选择器语法可能会带来更多运气。

来源

2016-03-15 16:29:45 whipdancer

当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">'; 
     } 
    }); 
})

来源

2016-03-15 16:57:09 LGSon

CSS - 家长孩子选择不工作

回答

编辑

相关问题