Por qué jquery parent child selector no funciona aquí.

Aquí el elemento del artículo tiene su sección de elementos secundarios, y la sección contiene la etiqueta html select.

Entonces, con la lógica padre-hijo, tiene que funcionar, ¿no? Está volviendo indefinido.

$(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>
2
Dipak 17 sep. 2018 a las 08:41

3 respuestas

La mejor respuesta

No conoce el section correspondiente al elemento al que desea apuntar, el que tiene select[name="slct_cls"], por lo que no puede usar siblings - con un hermano, desearía seleccione el que tiene slct_cls, pero no sabe qué hermano tiene eso de antemano. Es mejor ir un nivel más alto, al article, y usar .find para encontrar un elemento descendiente con ese 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);
});
<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>
5
CertainPerformance 17 sep. 2018 a las 05:50

Use $(this).closest('article') para etiquetar a los padres <article> en lugar de .parent('article').

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

O

$(this).parent().siblings().find('select[name="slct_cls"]').val();
1
Bendy Zhang 17 sep. 2018 a las 05:50

He cambiado tu código. El problema estaba en el uso de sibling(). El select no es el hermano del section. También debe usar parents() en lugar de parent() para obtener todos los padres en su consulta.

$(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>
0
Nima Boobard 17 sep. 2018 a las 06:40