2016-04-12 9 views
1

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.Schließen Sie eine Klasse aus, wenn sie in einem Element mit der gleichen Klasse mit jQuery ist

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>

+0

Sie müssen also 2.1 und 2.2 auszuschließen? – Hackerman

+0

Ich muss die gesamte '.normalize' innerhalb der ersten '.normalize' – JmLavoier

+0

'var normalize = $ (". Normalize ") ausschließen. First();'? – Hackerman

Antwort

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... 
+0

Dieser Code ist nicht, dass ich brauche, aber der Filter hilft mir, meinen Code zu beheben. Vielen Dank. Hier mein fester Code: https://jsfiddle.net/jmlavoier/qw1k9qva/7/ – JmLavoier

+0

@JmLavoier - Poste deinen Code als Antwort und erkläre den Unterschied. So können Sie die exakte Lösung und nicht nur ein Sprungbrett akzeptieren :) –

-1

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>