Schließen Sie eine Klasse aus, wenn sie in einem Element mit der gleichen Klasse mit jQuery ist

Question

Ich finde alle .normalize und für jeden finde ich die .normalize-item drin. Aber einer von ihnen hat einen anderen .normalize im Inneren. Ich muss das .normalize innerhalb .normalize ausschließen, weil ich gerade das .normalize-item dieses .normalize finden möchte.

var normalize = $(".normalize"); 
 
var colors = ["red", "blue"]; 
 
var higherHeight = 0; 
 

 
normalize.each((colorIndex, el) => { 
 
    var panels = $(el).find(".normalize-item"); 
 
    panels.css("height", "auto"); 
 

 
    panels.each((i, el) => { 
 
     $(el).css({ 
 
      "border": "4px solid", 
 
      "border-color": colors[colorIndex] 
 
     }); 
 
     higherHeight = higherHeight < $(el).height() ? $(el).height() : higherHeight; 
 
    }); 
 
    panels.css("height", higherHeight); 
 
});

.normalize { 
 
    float: left; 
 
} 
 

 
span { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.normalize-item { 
 
    float: left; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<div class="normalize"> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.1 <br><br><br><br></span> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> 
 
     Item 1.2 
 
    </span> 
 
     <div class="normalize"> 
 
      <div class="normalize-item"> 
 
       <span> Item 2.1 </span> 
 
      </div> 
 
      <div class="normalize-item"> 
 
       <span> Item 2.2 </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.3 </span> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.4 </span> 
 
    </div> 
 
</div>

Answer 1

jsFiddle Demo

einfach den normalisieren Filter einstellen, bevor es

normalize.filter((_,el) => { 
    //only return true when there are no class=normalize parents 
    return $(el).parents('.normalize').length == 0 
}).each... 

Answer 2

Die Lösung über mein Problem Iterieren, verwende ich die filter in eac h .normalize, um alle .normalize-item auszuschließen, die in einem anderen .normalize sind.

Ich zähle, wie viel .normalize Eltern gibt und Zuordnung in countNormalizeParent. Und nachdem ich das .normalize-item filtere.

var normalize = $(".normalize"); 
 
var colors = ["red", "blue"]; 
 

 
normalize.each((colorIndex, el) => { 
 
\t var higherHeight = 0; 
 
\t var countNormalizeParent = $(el).parents(".normalize").length; 
 
    var panelsFiltered = $(el).find(".normalize-item").filter((_,el) => { 
 
     return $(el).parents('.normalize').length == countNormalizeParent + 1; 
 
    }); 
 
    
 
    panelsFiltered.css("height", "auto"); 
 
    
 
    panelsFiltered.each((i, el) => { 
 
     $(el).css({ 
 
      "border": "4px solid", 
 
      "border-color": colors[colorIndex] 
 
     }); 
 
     higherHeight = higherHeight < $(el).height() ? $(el).height() : higherHeight; 
 
    }); 
 
    panelsFiltered.css("height", higherHeight); 
 
});

.normalize { 
 
    float: left; 
 
} 
 

 
span { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.normalize-item { 
 
    float: left; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<div class="normalize"> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.1 <br><br><br><br></span> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> 
 
     Item 1.2 
 
    </span> 
 
     <div class="normalize"> 
 
      <div class="normalize-item"> 
 
       <span> Item 2.1 </span> 
 
      </div> 
 
      <div class="normalize-item"> 
 
       <span> Item 2.2 </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.3 </span> 
 
    </div> 
 
    <div class="normalize-item"> 
 
     <span> Item 1.4 </span> 
 
    </div> 
 
</div>