Question

为什么jquery父子选择器在这里不起作用。

此处article元素的子元素部分，而该部分包含html select标签。

因此，使用父子逻辑，它必须起作用，不是吗？返回未定义。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <article>
      <section>
        <select name='slct_cls'>
          <option value='1'>One</option>
          <option value='2'>Two</option>
        </select>
      </section>
      <br/>
      <section>
        <select name='slct_sec'>
          <option value='1'>A</option>
          <option value='2'>B</option>
        </select>
      </section>
    </article>
  </body>
</html>

Answer 1

您不知道与要定位的元素相对应的section，即带有select[name="slct_cls"]的元素，因此您不能使用siblings-同级，您d想选择一个带有slct_cls的兄弟，但您不知道哪个兄弟有该兄弟。最好再上一层，到达article，然后使用.find使用该选择器来查找后代元素：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <article>
    <section>
      <select name='slct_cls'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
      </select>
    </section>
    <br/>
    <section>
      <select name='slct_sec'>
        <option value='1'>A</option>
        <option value='2'>B</option>
      </select>
    </section>
  </article>
</body>

</html>

Answer 2

使用$(this).closest('article')而不是<article>来获得带有父标签的.parent('article')。

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

或

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

Answer 3

我更改了您的代码。问题出在sibling()用法上。 select不是section的兄弟。另外，您应该使用parents()而不是parent()来获取所有查询的父母。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <article>
      <section>
        <select name='slct_cls'>
          <option value='1'>One</option>
          <option value='2'>Two</option>
        </select>
      </section>
      <br/>
      <section>
        <select name='slct_sec'>
          <option value='1'>A</option>
          <option value='2'>B</option>
        </select>
      </section>
    </article>
  </body>
</html>

jQuery父子选择器返回未定义

3 个答案: