代码之家 › 专栏 › 技术社区 › Dipak

jquery父子选择器返回未定义

jquery javascript

Dipak · 技术社区 · 6 年前

为什么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>

3 回复 | 直到 6 年前

CertainPerformance 6 年前

你不知道 section 对应于您要针对的元素,即 select[name="slct_cls"] ,所以你不能使用 siblings 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>

Bendy Zhang 6 年前

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

Nima Boobard 6 年前

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>