是否可以选择左侧相同位置的所有div？答案

【问题标题】：Is it possible to select all the divs with same position left?是否可以选择左侧相同位置的所有div？
【发布时间】：2011-12-08 16:11:47
【问题描述】：

我在一个页面上有 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 具有相同宽度并且可能占据左列或右列的 else 情况。

更新：

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

在上述else条件内：

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

【问题讨论】：

让我们看看将它们动态放置在列中的代码！
您能否发布将 div 分隔到每一列的代码。理论上是在对列进行排序时使用addClass()，然后选择所有带有相关类的div。
我回答了，但我很确定我误解了你在做什么，所以我删除了它。

标签： jquery

【解决方案1】：

这样的事情可能会做到这一点

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

编辑：

鉴于您的评论

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

你可以试试这样的

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

也就是说，如果左列div的width大于正在放置的div的width，则将右列类添加到正在放置的div。

【讨论】：

很遗憾这行不通，因为虽然有些元素是向左浮动的，但如果 div 的大小小于左列 div，它就会被放在右列中。
如果@web_dev 是这种情况，则在if 语句中添加or 或添加else。

【解决方案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");
            }

【讨论】：