How to select parent's sibling's children

Question

HTML：

<div class="parent"> 
  <input></input> 
  <button></button> 
</div> 
<div class="siblings"> 
  <p class="children"></p> 
</div> 

jQuery:

$('button').click(function(){ 
  if($(this).siblings('input') != ""){ 
    var addTo = $(this).siblings('input').val(); 
    $(this).parent('parent').siblings('siblings').children('children').html(addTo); 
  } 
}); 

Why doesn't it work? I want to grab the value from the input, and replace the content of p.

Answer 1

You are referencing the selectors for the classes as if they are elements, (they are missing the dot: .) -- so you probably want to change it into something like:

$(this).parent('.parent').siblings('.siblings').children('.children').html(addTo); 

but there's a bunch of other weird stuff there, which you'll want to fix eventually as well. Like others have pointed out, your if statement (if($(this).siblings('input') != ""){) will always evaluate to true, I'm guessing you are trying to see if it's value is empty?

Here's a working complete rewrite fwiw:

$('button').click(function(){
  var input = $(this).siblings('input'),
      val = input.val();
  if(val != ""){ 
    $(this).parent('.parent').find('.children').html(val); 
  }
});