Question

我在页面上有6个div，它们根据它们的内容动态放置到2列中。在这种情况下 - 一些div被置于左列，一些被置于右列 - 所有这些都取决于div的高度。我想抓住左栏或右栏中的所有div。我正在寻找一种方法为所有左列div添加一个类来区分右列div？是否可以在jQuery中使用选择器来实现这一目标？

 function fixPAPanelHeights()
    {
        var column1Height = 0;
        var column2Height = 0;
        var panel1Item;
        var panel2Item;

        var panelCount = 0;

        $j("div.panelItr").each(function() {
            panelCount++;
            if ($j(this).hasClass("panel2Column"))
                {
                    if (column1Height > column2Height)
                    {
                        $j(panel2Item).css("height", $j(panel2Item).innerHeight() + column1Height - column2Height + (5 * (((panelCount - 1) / 2) - 1)));
                    }
                    else if (column2Height > column1Height)
                    {
                        $j(panel1Item).css("height", $j(panel1Item).innerHeight() + column2Height - column1Height + (5 * (((panelCount - 1) / 2) - 1)));
                    }
                    column1Height = 0;
                    column2Height = 0;
                    panelCount = 0;
                }
            else
                {           
                    if (panelCount%2 == 1)
                    {                   
                        $j(this).css("float", "left");
                                    pos = $j(this).offset();


            $j(this).css({ "left": (pos.left) + "px"});
                            panel1Item = $j(this);              
                            column1Height += $j(this).innerHeight();                
                        }
                        else
                        {

                            $j(this).css("float", "left");
                    panel2Item = $j(this);
    pos = $j(this).offset();
        $j(this).css({ "left": (pos.left) + "px"}); 


                        column2Height += $j(this).innerHeight();

                    }
                }

         });

注意：if（$ j（this）.hasClass（“panel2Column”））条件测试是否有足够长的div来占用两列并根据它进行一些计算。我们担心其他情况，其中所有div具有相同的宽度，并且可能占据左列或右列。

更新：

有点想出一个解决方案，用于识别div放在哪一列。由于它是一个2列，只有2个可能的div左侧位置，下面的代码有帮助。

在上述其他条件中：

var dataHolder = $j("div.panelItr").first().offset().left;
else{
    if($j(this).offset().left == dataHolder){
                    $j(this).addClass("leftColumn");
                }
                else{
                    $j(this).addClass("rightColumn");
                }
}

Answer 1

这样的事可能会这样做

if($('div').css('float') == 'left'){
    $('div').addClass('leftColumn')
}

修改

鉴于你的评论

如果div的大小小于左列div，则为放在右栏

你可能会尝试这样的事情

if($('.leftColumn').css('width') > $('.newDiv').css('width')){ $('.newDiv').addClass('rightColumn') }

即，如果左列width的{{1}}大于div的{{1}}，则向width添加正确的列类{1}}被安置。

Answer 2

有点想出一个解决方案，用于识别div放在哪一列。由于它是一个2列，只有2个可能的左侧位置，因此下面的代码会有所帮助。

var dataHolder = $j("div.panelItr").first().offset().left;

if($j(this).offset().left == dataHolder){
                $j(this).addClass("leftColumn");
            }
            else{
                $j(this).addClass("rightColumn");
            }

是否可以选择剩下相同位置的所有div？

2 个答案: