Отфильтруйте и уменьшите заданную коллекцию элементов DOM jQuery, чтобы из нее были удалены элементы, являющиеся дочерними элементами других элементов коллекции.

Question

У меня есть коллекция элементов DOM, которая была создана с использованием RegEx на узлах для поиска определенного ключевого слова.Эта коллекция содержит все виды HTML-элементов.

Как можно сузить такую ​​коллекцию, чтобы она содержала только элементы верхнего уровня?

- По сути, с учетом collection_A создается collection_B, который не содержит элементовэто могут быть потомки других элементов в коллекции.

Например:

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


<div class="div_1"> no key here </div>
<div class="div_2"> no key here </div>
<div class="div_3"> contains {key}
  <div class="div_a"> no key here </div>
  <div class="div_b"> contains {key} </div>
  <div class="div_c"> no key here </div>
  <div class="div_d"> contains {key}
    <div class="div_e"> contains {key} </div>
    <div class="div_f"> no key here </div>
    <div class="div_g"> contains {key} </div>
  </div>
</div>
<div class="div_4"> no key here </div>
<div class="div_5"> no key here </div>
<div class="div_6"> contains {key} </div>
<div class="div_7"> no key here
  <div class="div_h"> no key here </div>
  <div class="div_i"> contains {key} </div>
  <div class="div_j"> no key here </div>
  <div class="div_k"> contains {key}
    <div class="div_l"> contains {key} </div>
    <div class="div_m"> no key here </div>
    <div class="div_n"> contains {key} </div>
  </div>
</div>

Итак, коллекция jQuery теперь содержит следующие элементы DOM:

[".div_3", ".div_b", ".div_d", ".div_e", ".div_g", ".div_6", ".div_i", ".div_k", ".div_l", ".div_n"]

Как мне отфильтровать эту коллекцию, чтобы она стала следующей:?

[".div_3", ".div_6", ".div_i", ".div_k"]

Заранее спасибо, ребята, за любую помощь!

---

@ mplungjan - Длинная история: Суть в том, что коллекция Regexs используется для сбора всех текстовых узлов, которые содержатконкретный ключ стиля усов, например "{{this_is_a_key}}".Затем в коллекцию добавляются «нетекстовые узлы» родителей этих текстовых узлов.

Элементы DOM в этой коллекции jQuery (преобразуются в строки HTML и) должны быть обработаны для замены ключей в PHP насервер через AJAX-запрос, однако необходимо обрабатывать только элементы верхнего уровня, поскольку дочерние элементы уже обрабатываются в элементах верхнего уровня.

Answer 1

Я думаю, что ответ на заголовок вопроса отличается от ответа, который вы просили в конце, поскольку он касается коллекции, которую вы хотели ([".div_3", ".div_6"].

Если я не ошибаюсь, родители во фрагменте - это [".div_3", ".div_d"]. Укажите, какой набор вы хотите получить.

Answer 2

возвращает тех, у кого нет родителя, который также находится в коллекции

Возможно, не очень эффективен, но вы можете проверить, находится ли каждый узел в коллекции ключей, отфильтровавпередача ключей на узел:

var divs = keydivs.filter(function() {
  return keydivs.filter($(this).parent()).length == 0;
});

Пример:

// Find all nodes across all available, OPs code to include top-level and child nodes here
var keydivs = $("div").filter(function() {
  return $(this).contents().first('[nodeType=3]').text().indexOf("{key}") >= 0
});
console.log(keydivs.length, keydivs.map(function() {
  return this.className;
}).get());


// filter those that don't have a parent that is also in the collection
var divs = keydivs.filter(function() {
  return keydivs.filter($(this).parent()).length == 0;
});
console.log(divs.length, divs.map(function() {
  return this.className;
}).get());

div>div { margin-left: 1em; }

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

<div class="div_1"> no key here </div>
<div class="div_2"> no key here </div>
<div class="div_3"> contains {key}
  <div class="div_a"> no key here </div>
  <div class="div_b"> contains {key} </div>
  <div class="div_c"> no key here </div>
  <div class="div_d"> contains {key}
    <div class="div_e"> contains {key} </div>
    <div class="div_f"> no key here </div>
    <div class="div_g"> contains {key} </div>
  </div>
</div>
<div class="div_4"> no key here </div>
<div class="div_5"> no key here </div>
<div class="div_6"> contains {key} </div>
<div class="div_7"> no key here
  <div class="div_h"> no key here </div>
  <div class="div_i"> contains {key} </div>
  <div class="div_j"> no key here </div>
  <div class="div_k"> contains {key}
    <div class="div_l"> contains {key} </div>
    <div class="div_m"> no key here </div>
    <div class="div_n"> contains {key} </div>
  </div>
</div>

Answer 3

Как насчет того, чтобы просто взять верхние с текстом в них?

Заменить body на другой контейнер, если необходимо

let $divs = $("body>div")
$divs = $divs.filter(function() {
  return $(this).text().indexOf("contains")!=-1
})

console.log($divs.length)

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


<div class="div_1"> no key here </div>
<div class="div_2"> no key here </div>
<div class="div_3"> contains {key}
  <div class="div_a"> no key here </div>
  <div class="div_b"> contains {key} </div>
  <div class="div_c"> no key here </div>
  <div class="div_d"> contains {key}
    <div class="div_e"> contains {key} </div>
    <div class="div_f"> no key here </div>
    <div class="div_g"> contains {key} </div>
  </div>
</div>
<div class="div_4"> no key here </div>
<div class="div_5"> no key here </div>
<div class="div_6"> contains {key} </div>