2016-04-12 1 views
1

Я нахожу все .normalize и для каждого из них я нашел .normalize-item. Но у одного из них есть еще один .normalize внутри. Мне нужно исключить это .normalize внутри .normalize, потому что я хочу просто найти .normalize-item этого .normalize.Исключить класс, когда он находится внутри элемента с тем же классом, используя jQuery

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

Так что вам нужно, чтобы исключить 2.1 и 2.2? – Hackerman

+0

Мне нужно исключить весь '.normalize' внутри первого' .normalize' – JmLavoier

+0

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

ответ

1

jsFiddle Demo

Просто фильтровать Нормализацию поставленную перед перебором его

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

Этот код не то, что мне нужно, но фильтр поможет мне исправить мой код. Спасибо. Здесь мой фиксированный код: https://jsfiddle.net/jmlavoier/qw1k9qva/7/ – JmLavoier

+0

@JmLavoier - Отправьте свой код в качестве ответа и объясните разницу. Таким образом, вы можете принять точное решение, а не только степпинг :) –

-1

Решения о моей проблеме, я использую filter в EAC h .normalize, чтобы исключить все .normalize-item, которые находятся внутри другого .normalize.

Я подсчитал, сколько .normalize родителей, которые причисляют и приписывают countNormalizeParent. И после того, как я использую фильтр .normalize-item.

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>