2
votes

Obtenir undefined de jquery find () dans mon exemple

J'ai une page HTML comme celle-ci:

J'ai mis un événement sur input.global_filter en utilisant jquery comme suit:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Table3-->
<table class="example" data-column="3">
  ......
</table>

<table>
  <tbody>
    <tr>
      <td>
        <input type="text" class="global_filter">
      </td>
    </tr>
  </tbody>
</table>

<!-- Table1-->
<table class="example" data-column="1">
  ......
</table>

<!-- Table2-->
<table class="example" data-column="2">
  ......
</table>

$('input.global_filter').on('keyup click', function() {
  document.write($(this).find('.example:first').prop('tagName'));
});

Cela se traduit par indéfini . Il doit donner le résultat TABLE . Où me suis-je trompé?

jquery html

5 commentaires

Parce que n'a pas d'enfants (ou de descendants) pour que vous puissiez .find

Alors quel devrait être le moyen de l'obtenir? Pouvez-vous s'il vous plaît m'aider avec ça

Supprimez le .find et utilisez la sélection jQuery à la place avec $ (

vous essayez de trouver à l'intérieur de $ (this) objet qui n'a pas d'enfant, vous devez donc utiliser $ (document) .find ()

Oui, je comprends, mais je veux que le tableau qui en est le plus proche soit sélectionné. Si j'utilise $ (document) .find (), il recherchera toute la page

3 Réponses :

0
votes

Dans le code ci-dessus, vous utilisez $ (this) et lorsque l'événement déclenche le déclencheur this devient le champ de saisie, cela signifie ce mot-clé faisant référence dans le champ de saisie, Et puis vous essayez de trouver exemple: d'abord à l'intérieur du champ de saisie afin que vous soyez indéfini.

Vérifiez la solution suivante

document.write($('body').find('.example:first').prop('tagName'));

4 commentaires

Je vois ce que tu veux dire. Mais regardez la question maintenant, j'ai fait un petit changement. ('body') le fera chercher de haut en bas et que se passe-t-il s'il y a une autre table (comme mentionné dans ma question) en haut. Ma principale motivation est d'accéder à la table juste à côté.

OK, vérifiez ceci $ (this) .closest ("Table"). Prop ('tagName') . Est-ce que vous demandez ??

Non, cela ne fonctionnera pas car le plus proche () traverse ses ancêtres dans l'arborescence DOM. Je veux la table juste à côté.

J'ai mentionné les noms des tables maintenant. Je veux accéder au tableau suivant (Table2).

1
votes

Vous avez utilisé parents au lieu de find . Essayez ceci:

$(function(){
  $('input.global_filter').on('keyup click', function() {
    console.log($(this).parents().siblings('table').first().prop('tagName'));
    console.log($(this).parents().next('.example').data('column'));
  });
})

3 commentaires

Non, cela ne fonctionnera pas car le plus proche () traverse ses ancêtres dans l'arborescence DOM. Je veux la table juste à côté.

@MazharMIK, vous utilisez la table des frères et sœurs

Je veux la table juste à côté vers le bas.

0
votes

veuillez essayer avec ceci:

   $('input.global_filter').on('keyup click', function() {
      document.write($('.example').eq(1).prop('tagName'));
    });

1 commentaires

Non, il accédera à la Table3. Je veux accéder à Table2