Удалите различные div в соответствии со спецификацией c текст в - PullRequest
Новая
       0

Удалите различные div в соответствии со спецификацией c текст в

0 голосов
/ 07 мая 2020

У меня есть эта DOM, и я хочу сделать фильтр, удаляющий li в соответствии с текстом, включенным в тег h5. 

<div class="total">
  <ul>
   <li>
    <h5>this super heroe is super cool: Clark Kent</h5>
   </li>
  </ul>

  <ul>
   <li>
    <h5>I always wanted to be Batman</h5>
   </li>
  </ul>

  <ul>
   <li>
    <h5>Somedays I will be transform as Spiderman </h5>
   </li>
 </ul>

  <ul>
   <li>
    <h5>This women is incredible Catwoman</h5>
   </li>
  </ul>

   <li>
    <ul>
     <h5>The worst character is Joker</h5>
   </ul>
   </li>

   <ul>
    <li>
     <h5>Someone knows about Green Lantern </h5>
    </li>
   </ul>
</div>

Мне нужно сделать фильтр в соответствии со строкой в ​​этом массиве, который не имеет coma 

let appDataTab = ["Clark Kent    Catwoman     Joker"]

Моя цель - удалить все li , которые его h5 не содержит "Clark Kent", "Catwoman" и "Joker". Как вы можете видеть, appDataTab содержит эти строки без разделения .

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Сначала вы должны сделать его обычным массивом, разделенным запятыми, затем найдите элемент и удалите li, содержащий элемент.

Шаги комментируются один за другим: 

$(document).ready(function () {
//Your array
var appDataTab = ["Clark Kent    Catwoman     Joker"];
//Split with more than 1 space (2 space)
var appDataSplit = appDataTab[0].split("  ");
//Remove empty elements
var filtered = appDataSplit.filter(function (el) {
  return el != "";
});
//Trim elements from extra spaces
var cleanFiltered = [];
for (i=0; i < filtered.length; i++){
  cleanFiltered.push(filtered[i].trim());
}
console.log(cleanFiltered);
//look for any li containing the words in cleanFilter array
  $("li").each(function(){
    for (i=0; i < cleanFiltered.length;i++){
      if ($(this).text().indexOf(cleanFiltered[i]) > -1) {
        $(this).remove();
      }  
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
  <ul>
   <li>
    <h5>this super heroe is super cool: Clark Kent</h5>
   </li>
  </ul>

  <ul>
   <li>
    <h5>I always wanted to be Batman</h5>
   </li>
  </ul>

  <ul>
   <li>
    <h5>Somedays I will be transform as Spiderman </h5>
   </li>
 </ul>

  <ul>
   <li>
    <h5>This women is incredible Catwoman</h5>
   </li>
  </ul>

   <ul>
    <li>
     <h5>The worst character is Joker</h5>
   </li>
   </ul>

   <ul>
    <li>
     <h5>Someone knows about Green Lantern </h5>
    </li>
   </ul>
</div>
0 голосов
/ 07 мая 2020

Вот обновленный код после добавления дополнительного кода после проверки с моей стороны. 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div class="total">
        <ul>
            <li>
                <h5>this super heroe is super cool: Clark Kent</h5>
            </li>
        </ul>
        <ul>
            <li>
                <h5>I always wanted to be Batman</h5>
            </li>
        </ul>
        <ul>
            <li>
                <h5>Somedays I will be transform as Spiderman </h5>
            </li>
        </ul>
        <ul>
            <li>
                <h5>This women is incredible Catwoman</h5>
            </li>
        </ul>
        <ul>
            <li>
                <h5>The worst character is Joker</h5>
            </li>
        </ul>        
        <ul>
            <li>
                <h5>Someone knows about Green Lantern </h5>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            var prohibited = ['Clark Kent', 'Catwoman', 'Joker'];

            $("li").each(function (index) {
                var wordFound = false;

                for (var i = 0; i < prohibited.length; i++) {

                    if ($(this).text().indexOf(prohibited[i]) > -1) {
                        wordFound = true;
                        break;
                    }
                }

                if (wordFound == false) {
                    $(this).parent().remove();
                }
            });
        })
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...