jquery parent child selecter returning undefined

Question

Why jquery parent child selector is not working here.

Here article element has it's children element section, and section contains html select tag.

So, with parent child logic, it has to work, isn't it ? It is returning undefined.

$(document).on('change', 'select[name="slct_sec"]', function(){

    //This one is working
    var cls=$('section > select[name="slct_cls"]').val();
    
    //Not working
    var cls_1=$(this).parent('section').siblings('section > select[name="slct_cls"]').val();
 
   //Not working
    var cls_2=$(this).parent('article').children('section > select[name="slct_cls"]').val();
    alert(cls_1);
    alert(cls_2);
 
  });

user_9515207 · Answer

You don't know the section corresponding to the element you want to target, the one with select[name="slct_cls"], so you can't use siblings - with a sibling, you'd want to select the one with the slct_cls, but you don't know which sibling has that beforehand. Better to go one level higher, to the article, and use .find to find a descendant element with that selector:

$(document).on('change', 'select[name="slct_sec"]', function() {
  var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
  console.log(cls_1);
});

user_10189619 · Answer

Use $(this).closest('article') to get parent tagged

instead of .parent('article').

var cls_1=$(this).closest('article').find('select[name="slct_cls"]').val();

or

$(this).parent().siblings().find('select[name="slct_cls"]').val();

user_4098905 · Answer

I've changed your code. The problem was on the sibling() usage. The select is not the sibling of the section. Also you should use parents() instead of parent() to get all parents on your query.

$(document).on('change', 'select[name="slct_sec"]', function(){
debugger;
    //This one is working
    var cls=$('section > select[name="slct_cls"]').val();
    
    //Not working
    var cls_1=$(this).parent().siblings('section').find('[name="slct_cls"]').val();
 
   //Not working
    var cls_2=$(this).parents('article').children('section').find('[name="slct_cls"]').val();
    alert(cls_1);
    alert(cls_2);
 
  });

jquery parent child selecter returning undefined

3 Answers