Javascript — JQuery — Найти всех потомков на любом уровне, но не потомков этих потомков

JQuery — найти всех потомков на любом уровне, но не потомков этих потомков

Вы можете использовать :not для того, чтобы убедиться, что выбранные элементы не соответствуют определенному селектору — здесь, #some_id [some_attribute] [some_attribute] (потому что элементы, которые соответствуют этому селектору, будут some_attribute вложенными в другой some_attribute который не является #some_id ) :

 const result = $("#some_id") .find("[some_attribute]:not(#some_id [some_attribute] [some_attribute])") .each(function() { console.log(this.innerHTML); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;span id="some_id" some_attribute{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; 

Если вы не можете жестко запрограммировать его, я полагаю, что можно было бы установить атрибут, чтобы вы могли использовать :not правильно:

 const elm = $("#some_id"); elm[0].dataset.parent = ''; elm .find("[some_attribute]:not([data-parent] [some_attribute] [some_attribute])") .each(function() { console.log(this.innerHTML); }); elm[0].removeAttribute('data-parent'); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;span id="some_id" some_attribute{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; 

Если вы не хотите менять DOM, также .filter и проверьте, что .closest элемент .closest с [some_attribute] :

 const elm = $("#some_id"); elm .find("[some_attribute]") .filter(function() { return $(this).parent().closest('[some_attribute]')[0] === elm[0]; }) .each(function() { console.log(this.innerHTML); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;span id="some_id" some_attribute{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; 

Используя старые версии jQuery, вы можете использовать .selector :

 const elm = $("#some_id"); const sel = elm.selector; elm .find(`[some_attribute]:not(${sel} [some_attribute] [some_attribute])`) .each(function() { console.log(this.innerHTML); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;span id="some_id" some_attribute{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span some_attribute{amp}gt; {amp}lt;!-- IGNORE --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span{amp}gt; {amp}lt;span some_attribute{amp}gt;sel {amp}lt;!-- SELECT --{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector