Выберите вложенные элементы с помощью jQuery - PullRequest
1 голос
/ 05 марта 2019

У меня проблема с выбором элемента с помощью jQuery.

У меня есть HTML-таблица со специальным полем. Вы можете увидеть структуру поля здесь:

    <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>

Я хочу удалить строку (родительский элемент элемента td), если после первого элемента em следует «-» (как в примере выше).

Иногда в этом примере есть что-то похожее:

    <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>

Я знаю, как выбирать элементы по имени класса или имени элемента или по первому дочернему элементу элемента.

Но в этом случае ничего не получалось. Как получить текст за первым элементом em и проверить, является ли он символом "-", а не внешней строкой?

Ответы [ 3 ]

1 голос
/ 05 марта 2019

Если я правильно понял ваш вопрос, вы можете использовать регулярные выражения, чтобы достичь того, что вы хотите.Вот код, который я написал для вас.

<!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>

Попробуйте это, оно должно работать так, как оно работает на моей стороне.

Примечание: В регулярном выражении я использовал " вместо ', потому что HTML отображает оба вида цитат как "

PS: Это не очень хороший способ для достижения этой цели.вместо этого вы должны обернуть вашу первую строку текста в промежуток с идентификатором, а затем искать, если это - или любой другой текст.

0 голосов
/ 05 марта 2019

Если полная таблица может содержать или не содержать строки с Create Events: -.Тогда итерация будет необходима.Для каждой строки, доступной в таблице, вам нужно взять первый em строки и проверить текстовое содержимое следующего брата.Если он соответствует '-', тогда вся строка должна быть удалена.

Сначала выполняется итерация таблицы и всех ее строк:

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

В цикле мы определяемпервый em, доступный на каждом теге td.Затем мы получаем следующий текст, используя nextSibling.nodeValue, и обрезаем его, чтобы исключить дополнительные пробелы.

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

И, наконец, мы сравниваем, что содержимое равно '-'.Вы можете увидеть полный код ниже.

<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>

Вы можете проверить документацию каждого jQuery здесь .

0 голосов
/ 05 марта 2019

Для этого вам нужно найти текстовый узел, следующий за первым em. Для этого вы можете выбрать элемент в jQuery и затем извлечь узел nextSibling из базового объекта Element.

Если вы поместите эту логику в filter(), который проверяет значение узла, тогда вы можете просто remove() строки, где он пуст, что-то вроде этого:

$('tr').filter(function() {
  return ($(this).find('td em:first')[0].nextSibling.textContent || '').trim() === '-';
}).remove();
hr { margin: 8px 0; }
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...