使用jQuery

Question

我找到了所有.normalize并且每个人都找到了.normalize-item。但其中一个内部还有另一个.normalize。我需要在.normalize内排除.normalize，因为我只想找到.normalize-item的{​​{1}}。

.normalize

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;
}

Answer 1

<强> jsFiddle Demo

只需在迭代之前过滤规范化集

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

Answer 2

关于我的问题的解决方案，我使用每个filter中的.normalize来排除另一个.normalize-item内的所有.normalize。

我计算了.normalize个父母的数量并归因于countNormalizeParent。在我用来过滤.normalize-item。

之后

＆＃13;

＆＃13;

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

normalize.each((colorIndex, el) => {
	var higherHeight = 0;
	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);
});

＆＃13;

.normalize {
    float: left;
}

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;