css - CSS＆Jquery-切换选择子元素

项目：

我有一个按钮，可将列长从3切换到4。

JQUERY

    <script language="javascript">
    $(document).ready(function(){

        $("p.changeCol_but").click(function(){

           $("p.changeCol_but span").toggle();

           $(".products ul li#prod").toggleClass("column_3","slow");

*--// fake code of what I want to do //--*

 $(".products ul li#prod:nth-child(4,8,12)").toggleClass(".products ul li#prod:nth-child(3,6,9)", "fast");

*--// fake code of what I want to do //--*

        });
    });

    </script>

的CSS

<style>

.products ul { float:left; display:block;  }
        .products ul li#prod { float:left; display:block; margin-right:8px; width:225px; border:1px #209d00 solid; position:relative; margin-bottom:8px; }
        .products ul li#prod:nth-child(4) { margin-right:0; }

</style>

的HTML

 <div class="products">

      <ul>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Power Bilt Tourbilt Golf Package</h1>


          <div class="popup">
            <ul class="data">
              <li>Deep face alloy driver and fairway metal with graphite shafts. (ladies driver, 3FW, 5FW with graphite shafts)</li>
              <li>Two Pro Trajectory Hybrid Clubs with steel shafts. (ladies set = 1 graphite shafted hybrid)</li>
              <li>5 alloy irons (#6-PW) with steel shafts. (ladies set = #7-SW with graphite shafts)</li>

            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Alien AG-5 Golf Package</h1>
          <div class="popup">
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Tour Craft Xtreme Golf Package</h1>
          <div class="popup" >
            <ul class="data">
              <li>18 piece golf package</li>
              <li>Package includes: driver, faiway metal, hybrids, irons, putter, standbag & head covers</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Tour Craft SX4 Golf Package</h1>
          <div class="popup" >
            <ul class="data">
             <li>16 piece golf package</li>
              <li>Package includes: driver, faiway metal, hybrids, irons, putter, standbag & head covers</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>


            <li id="prod">
          <div class="mainpic"></div>
          <h1>Orlimar H.E.2 Golf Package</h1>
          <div class="popup" >
            <ul class="data">
              <li>Woods, Hybrids, Irons, Putter, Standbag & Head Covers</li>
              <li>Driver, faiway metal and Hybrids feature graphite shafts</li>
              <li>Alloy irons feature lightweight steel shafts</li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

        <li id="prod">
          <div class="mainpic"></div>
          <h1>Don't Know</h1>
          <div class="popup" >
            <ul class="data">
              <li></li>
            </ul>
            <p>SKU: </p>
          </div>
          <!--Popup-->
        </li>

      </ul>

    </div>
    <!--Products-->

问题：

默认情况下，它们都具有正确的边距。将margin-right：0从每第4个项目切换到每第3个项目。

提前致谢。

最佳答案

当您已经依赖css3选择器时，您可以简单地进行更改：

.products ul li#prod:nth-child(4)

至：

.products ul li#prod:last-child

但这当然只有在将第4列设置为display:none以便第3列确实是最后一列的情况下才有效。目前，我不知道这是否真的在发生，因为.toggleClass(".products ul li#prod#:nth-child(3)", "fast")对我来说意义不大。

请注意，toggleClass的第一个参数必须是类名（或更多...）或函数，在您的示例中，两者都不是。另请注意，第二个参数不是速度，请参见.toggleClass()