Question

Project:

I am having a button that toggles the column length from 3 to 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-->

Problem:

By default they all have a right margin. toggling the margin-right:0 from every 4th item to every 3rd item.

Thanks in advance.

Answer 1

As you are relying on css3 selectors already, you can simply change:

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

to:

.products ul li#prod:last-child

But that would of course only work if you set the 4th column to display:none so that the 3rd column really is the last column. At the moment I don´t know if that´s really happening as .toggleClass(".products ul li#prod#:nth-child(3)", "fast") doesn´t make a lot of sense to me.

Note that the first argument for toggleClass needs to be a class name (or more…) or a function and in your example it is neither. Also note that the second argument is not a speed, see .toggleClass()