显示的项目列表不同

时间:2014-10-30 09:05:26

标签: jquery html css

看看这个例子:https://www.airbnb.com/ 我有一个看起来像这样的项目列表:

  <ul id="list2">
    <li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-with-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality">Lorem ipsum dolor sit amet aaaaa</a></li>
<li class="_column large"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W720xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(1)-720-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-1">Lorem ipsum dolor sit amet2</a></li>
<li class="_column large"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W720xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(2)-720-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-2">Lorem ipsum dolor sit amet3</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(6)-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-6">Lorem ipsum dolor sit amet2</a></li><li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(3)-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-3">Lorem ipsum dolor sit amet4</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(5)-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-5">Lorem ipsum dolor sit amet3</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(7)-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-7">Lorem ipsum dolor sit amet</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(4)-350-300.jpg" alt="Home " title="Home ">
    <a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-4">Lorem ipsum dolor sit amet4</a>
</li>
    </ul>

和css:

.image-slider-wrapper #list2 li {
    display: inline-block;
    width: auto;
    margin-right: 20px;
    position: relative;
    background: #626262;
    margin-bottom: 20px;
}

jquery代码:

var summ = 0;
    jQuery("#list2 li").each(function () {
        if (jQuery(this).hasClass("large")) {
            summ += 2;
        }
        else if (jQuery(this).hasClass("small")) {
            summ++;
        }

        if (summ == 3) {
            jQuery(this).css('margin-right', '0');
        }
    });

当我们有2张pic:1小和1大我们有一条线或当我们有3张小pic我们有另一条线。当项目是最后一行时,我想删除margin-right。怎么做?

0 个答案:

没有答案