jQuery、Smarty、CSS、HTML-两个列表<；UL>；，以几种不同的方式管理

我有以下问题。所以有两个列表-每个列表显示图片（产品的特征）。一个显示每个小于150px的特征，另一个显示每个大于150px的特征。现在，我们有三种情况（取决于特定产品的功能）： 1.同时显示较大和较小的图片。 2.只显示小图片。 3.只显示大图片。 在第一种情况下，图片被分为两列——左侧较小，右侧较大。它们之间还有一个div（position:absolute），用作垂直边界。 我想改变它们的显示方式，当我们有案例2或案例3时-只有小或大的图片，不应该有这个垂直边框，并且某些可见的UL应该是100%宽度。实现这一目标的最佳方式是什么？纯CSS？jQuery？PHP？顺便说一句，这些列表是通过Smarty预先获取的

请看代码：

---

jQuery:

$(document).ready(function() {
    $("#idTab1Tags li").each(function() {
        var $this = $(this);
        $this.css({width: 'auto', height: 'auto'});
        var pic_real_width = $this.width();
        var pic_real_height = $this.height();
        if(pic_real_width<150){
                $(this).addClass("imgSmall");
        }
        else {
                $(this).addClass("imgBig");
        }
    });
 });

{if $tags}
        <div id="idTab1Tags">
            <div id="idTab1TagsContainer">
                <ul id="tagsicons" class="tagsicons tagsSmall">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <ul id="tagsicons" class="tagsicons tagsBig">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <div class="clear"></div>
                <div id="idTab1TagsContainerBorder"></div>
            </div>
        </div>
    {/if} 

ul#tagsicons {
    clear: both;
    list-style: none;
    padding-left: 0;
    width:456px;
    display:inline-block;
}
#idTab1Tags { margin:15px 0 0 0; }
ul#tagsicons li { display:inline-block; vertical-align:middle; position:relative; }
.tagsSmall { margin:0 7px 0 0; }
.tagsSmall li { margin:0 13px 13px 0; }
.tagsBig li { margin:0 0 13px; }
#idTab1TagsContainer {
    padding:0 0 0 20px;
    position:relative;
}
#idTab1TagsContainerBorder {
    position:absolute;
    background:#F5F5F5;
    width:1px;
    height:100%;
    top:0;
    left:459.5px;
}
.tagsSmall .imgBig, .tagsBig .imgSmall { display:none !important; }

---

因此，边框是

#idTab1TagsContainerBorder

，小图像在

内。小图像在
内，大图像在
内。tagsBig

谢谢你的帮助

编辑：

与此同时，我找到了解决办法：

jQuery：

var big = $( ".tagsBig li" );
var small = $( ".tagsSmall li" );
if (big.is(":visible")){ 
} else {
    $(".tagsSmall").addClass("wideSmall");
    $('#idTab1TagsContainerBorder').hide(1);    
}
if (small.is(":visible")){ 
} else {
    $(".tagsBig").addClass("wideBig");
    $('#idTab1TagsContainerBorder').hide(1);    
}

CSS:

下面的解决方案同样有效。
您可以存储每种类型的图像，然后检查存在哪些图像，然后隐藏UI的某些部分：

var smallImages = [];
var bigImages = [];

$("#idTab1Tags li").each(function()
{
    var $this = $(this);

    $this.css({width: 'auto', height: 'auto'});
    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<150)
    {
        smallImages.push($this);
        $(this).addClass("imgSmall");
    }
    else
    {
        bigImages.push($this);
        $(this).addClass("imgBig");
    }
}

if (smallImages.length == 0)
{
    $("ul .tagsSmall").hide();
}
if (bigImages.length == 0)
{
    $("ul .tagsBig").hide();
}
if (smallImages.length == 0 || bigImages.length == 0)
{
    $("#idTab1TagsContainerBorder").hide();
}

var smallImages=[]；
var bigImages=[]；
$（“#idTab1Tags li”）。每个（函数（）
{
var$this=$（this）；
$this.css（{width:'auto'，height:'auto'}）；
var pic_real_width=$this.width（）；
var pic_real_height=$this.height（）；
如果（pic_real_width）谢谢你的回答。我测试了它，你的解决方案有效：）但是，我也找到了解决方案（请看第一篇文章）-但是再次感谢你，你的代码更短、更干净、更流畅。
var smallImages = [];
var bigImages = [];

$("#idTab1Tags li").each(function()
{
    var $this = $(this);

    $this.css({width: 'auto', height: 'auto'});
    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<150)
    {
        smallImages.push($this);
        $(this).addClass("imgSmall");
    }
    else
    {
        bigImages.push($this);
        $(this).addClass("imgBig");
    }
}

if (smallImages.length == 0)
{
    $("ul .tagsSmall").hide();
}
if (bigImages.length == 0)
{
    $("ul .tagsBig").hide();
}
if (smallImages.length == 0 || bigImages.length == 0)
{
    $("#idTab1TagsContainerBorder").hide();
}