CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Blease
Blease

Reputation: 1420

CSS - Parent child selector not working

I have the following code:

.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

I need to select the ingredients div using jquery in the format of $("#links")["closest"](".recipe > .ingredients") but this doesn't select anything.

It's frustrating though as $("#links")["closest"](".recipe > .row") will return the correct div.

Fiddle of what works and what I want: https://jsfiddle.net/yL6dr4s1/

Upvotes: 1

Views: 464

Answers (4)

Chitrang
Chitrang

Reputation: 2114

According to jQuery documentation, closest method tries to find element matching the selector by testing the element itself and traversing up through DOM.

It does not go through siblings of the element.

Based on your requirements, it seems like you want to traverse the tree for getting match in siblings. jQuery has siblings method to do that. So one solution would be to use siblings method like:

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

Another soultion would be to get closest parent and then use children as answered by @mhodges

As for the query $("#links")["closest"](".recipe > .row"):

It works fine because closest method finds the match in the element itself.

Here is the example to showcase that:

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

Upvotes: 2

Asons
Asons

Reputation: 87191

When jQuery gets to buggy, doesn't have a certain option or just becomes to messy to use for a certain operation, it is good we also have access to good old plain 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>

Of course they can be combined

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

Upvotes: 0

trenthaynes
trenthaynes

Reputation: 1678

I don't think you can use the selectors in the way you propose.

As far as the DOM is concerned (and jQuery), the element defined by ingredient and the element defined by row are not related. You have to traverse up to the parent element, then back down to get to the child.

Here is a fiddle that hopefully demonstrates the issue.

If you can change it so that ingredient and row are both within the same parent div, you might have more luck with your test selector syntax.

Upvotes: 0

mhodges
mhodges

Reputation: 11116

I am not sure of your requirements on using the exact selector/syntax you provided, but this selector works exactly how you want it to. 

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

Edit

This is the closest I could get: 

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

Upvotes: 1

Related Questions