CSS & Jquery -切换选择子元素

Question

项目：

我有一个按钮，将列的长度从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>

 <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-->

问题：

默认情况下，它们都有一个适当的保证金。切换边距-右:0从每4项到每3项。

提前谢谢。

Answer 1

由于您已经依赖于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()