1
votes

Sélectionnez des éléments imbriqués avec jQuery

J'ai un problème en sélectionnant un élément par jQuery.

J'ai une table HTML qui a un champ spécial. Vous pouvez voir la structure du champ ici:

    <td>
      <em class='block'>Create Events:</em>
      here is something else and this line should not get removed
      <hr style='margin: 8px 0;'>
      <em class='block'>Update Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Required object:</em>
    </td>

Je veux supprimer la ligne (l'élément parent de l'élément td) si après le premier élément em suit un "-" (comme dans l'exemple ci-dessus).

Parfois, il est quelque chose d'autre comme dans cet exemple:

    <td>
      <em class='block'>Create Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Update Events:</em>
      -
      <hr style='margin: 8px 0;'>
      <em class='block'>Required object:</em>
    </td>

Je sais comment sélectionner des éléments par nom de classe ou par nom d'élément ou par le premier enfant d'un élément.

Mais dans ce cas, rien n'a fonctionné. Comment puis-je obtenir le texte derrière le premier élément em et tester s'il s'agit de "-" et non d'une chaîne externe?

javascript jquery jquery-selectors dom

1 commentaires

Cela peut-il être utile? Utilisez jQuery pour sélectionner du texte ne faisant pas partie d'un élément

3 Réponses :

0
votes

Pour y parvenir, vous devez rechercher le nœud de texte après le premier em . Pour cela, vous pouvez sélectionner l'élément dans jQuery puis récupérer le nœud nextSibling de l'objet Element sous-jacent.

Si vous placez cette logique dans un filter () qui vérifie la valeur du nœud, alors vous pouvez simplement supprimer () les lignes où il est vide, quelque chose comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <em class='block'>Create Events:</em> -
      <hr />
      <em class='block'>Update Events:</em> -
      <hr />
      <em class='block'>Required object:</em>
    </td>
  </tr>
  <tr>

    <td>
      <em class='block'>Create Events:</em> here is something else and this line should not get removed
      <hr />
      <em class='block'>Update Events:</em> -
      <hr />
      <em class='block'>Required object:</em>
    </td>
  </tr>
</table>

hr { margin: 8px 0; }

$('tr').filter(function() {
  return ($(this).find('td em:first')[0].nextSibling.textContent || '').trim() === '-';
}).remove();

1 commentaires

Merci, malheureusement, cela n'a pas fonctionné. Mais merci pour votre aide!

1
votes

Si j'ai bien compris votre question, vous pouvez utiliser regex pour réaliser ce que vous voulez. Voici un code que j'ai écrit pour vous.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <table>
    <tr>
      <td>
        <em class='block'>Create Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Update Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Required object:</em>
      </td>
    </tr>
    <tr>
      <td>
        <em class='block'>Create Events:</em> here is something else and this line should not get removed
        <hr style='margin: 8px 0;'>
        <em class='block'>Update Events:</em> -
        <hr style='margin: 8px 0;'>
        <em class='block'>Required object:</em>
      </td>
    </tr>
  </table>

  <script>
    $('table tr td').each(function() {
      var content = '<td>' + $(this).html() + '</td>';
      var regex =
        /<td>([\s\S]+?)<em class="block">Create Events:<\/em>([\s\S]+?)-([\s\S]+?)<em class="block">Update Events:<\/em>/i;
      if (regex.test(content)) {
        $(this).closest('tr').remove();
      }
    });
  </script>
</body>

</html>

Essayez celui-ci, il devrait fonctionner comme il fonctionnait de mon côté.

Remarque: Dans l'expression régulière j'ai utilisé " au lieu de ' car HTML rend les deux types de citations sous la forme "

PS: Ce n'est pas un bon moyen ce but. à la place, vous devriez envelopper votre première ligne de texte dans une plage avec un identifiant, puis chercher s'il s'agit de - ou de tout autre texte.

0 commentaires

0
votes

Si un tableau complet peut ou non contenir des lignes avec Créer des événements: - . Ensuite, une itération serait nécessaire. Pour chaque ligne disponible dans le tableau, vous devez prendre le premier em de la ligne et vérifier le contenu du texte du frère suivant. S'il correspond à un '-', alors la ligne entière doit être supprimée.

Tout d'abord, l'itération de la table et de toutes ses lignes:

<table>
    <tr> 
        <td>
            <em class='block'>Create Events:</em> here is something else and this line should not get removed
            <hr />
            <em class='block'>Update Events:</em> -
            <hr />
            <em class='block'>Required object:</em>
        </td>
    </tr>
    <tr>
        <td>
            <em class='block'>Create Events:</em> -
            <hr />
            <em class='block'>Update Events:</em> -
            <hr />
            <em class='block'>Required object:</em>
        </td>
    </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('table tr').each(function(i, tr) {
            var $em = $(tr).find('td em:first');
            var createContent = $em[0].nextSibling.nodeValue.trim();

            if (createContent === '-') {
                $(tr).remove();
            }
        });
    });
</script>

Dans la boucle, nous identifions le premier em disponible sur chaque balise td. Ensuite, nous obtenons le texte suivant en utilisant nextSibling.nodeValue et le coupons pour éviter les espaces supplémentaires.

var $em = $(tr).find('td em:first');
var createContent = $em[0].nextSibling.nodeValue.trim();

Et enfin, nous comparons que le contenu est égal à ' - '. Vous pouvez voir le code complet ci-dessous.

$('table tr').each(function(i, tr) {...}

Vous pouvez consulter la documentation de chaque jQuery ici .

0 commentaires