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

jquery父子选择器返回未定义

  •  2
  • 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 年前
        1
  •  5
  •   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>
        2
  •  1
  •   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();
    
        3
  •  0
  •   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>