问题描述:

I have nested Masonry grids like this:

<div class="masonry">

<div class="column">1</div> <!-- <- This one -->

<div class="column">2</div> <!-- <- This one -->

<div class="masonry">

<div class="column">3</div>

<div class="column">4</div>

</div>

<div class="sidebar">

<div class="column">5</div> <!-- <- This one -->

<div class="column">6</div> <!-- <- This one -->

</div>

</div>

How to select columns which are not nested inside another Masonry grid. Result set would hold columns 1, 2, 5 and 6?

I have references to both masonry elements:

var parentMasonry;

var childMasonry;

var elementsOutsideChild = parentMasonry.find('.column').not( /* What here? Not children of another .masonry? */ );

/* Or select all than apply filter? What is best to do? */

网友答案:
$('.masonry .column:not(.masonry .masonry .column)').css("color", "red");

JSFiddle: http://jsfiddle.net/t5njactk/1/

网友答案:
var elementsOutsideChild = parentMasonry.find('.column').not(function(){ return $(this).parents('.masonry').length !== 1 })
网友答案:

Something like this, Will work with any level on nested columns

$('.masonry').find('.masonry').find('.column').addClass('nested');
var columns = $('.column').not('.nested');

Demo --> http://jsfiddle.net/tqn2kumc/

网友答案:

The right solution would be to assign other classes to the nested divs

<div class="masonry">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="masonry">
        <div class="column col-exclude">3</div>
        <div class="column col-exclude">4</div>
    </div>
    <div class="sidebar">
        <div class="column">5</div>
        <div class="column">6</div>
    </div>
</div>

so you can go with:

$('.masonry').find('.column').not('.col-exclude');

but i would try with this

var elementsOutsideChild = parentMasonry.find('.column').not('.masonry')

because if your parentMasonry reference is correct, you should be able to find the columns you need

I have tried another working solution, if you need

$('.masonry').find('.column').not('.masonry .masonry .column').each(function(){

    var that = $(this);
    that.css({"color":"blue"});

});
相关阅读:
Top