javascript - 设置定价表相同高度 zurb 基础

Question

我正在使用 Zurb Foundation 来制作我的网站。我正在使用定价表来定义所有产品。这些图像将所有定价表抛到不同的高度。这是页面:http://codywd.x10.mx/supracing/products.html

为了解决这个问题，我找到了一个可以工作的 jQuery 脚本，但不是我需要的方式。

这是jQuery

            <script>
    var currentTallest = 0,
         currentRowStart = 0,
         rowDivs = new Array(),
         $el,
         topPosition = 0;

     $('.pricing-table').each(function() {

       $el = $(this);
       topPostion = $el.position().top;

       if (currentRowStart != topPostion) {

         // we just came to a new row.  Set all the heights on the completed row
         for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
           rowDivs[currentDiv].height(currentTallest);
         }

     // set the variables for the new row
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);

   } else {

     // another div on the current row.  Add it to the list and check if it's taller
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }

  // do the last row
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }

 });

    </script>

它在每个定价表的末尾添加了一个白色 block (请参见此处:http://i.imgur.com/oJm2jsc.png)我已经使用基础附带的内置均衡器包对此进行了测试，它做的事情完全相同。

如何让它在描述 li 而不是每个 ul 的末尾添加一个白色 block ？

如果您也需要，这里有一些示例定价表:

<div class="large-8 columns">
              <div class="row">
                  <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">SUP Racing T-Shirts</li>
                        <li class="bullet-item"><img src="img/product-imgs/SUP_Tees.jpg"></li>
                        <li class="description">Show your SUP Racing Pride!</li>
                        <li class="price">$18.00 + S&H</li>
                    </ul>
                  </div>

                  <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">SUP Porting for CR/500</li>
                        <li class="bullet-item"><img src="img/product-imgs/SUP_Porting.jpg"></li>
                        <li class="description">Great power and torque throughout the entire power band.</li>
                        <li class="price">$395.00 + S&H</li>
                    </ul>
                  </div>

                  <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">SUP Pipe for CR/500</li>
                        <li class="bullet-item"><img src="img/product-imgs/SUP_Pipe1.jpg"></li>
                        <li class="description">Our custom-designed pipe will give you better torque, and more useable power at a lower R.P.M.
                                                This price includes ceramic coating, silencer, flange, and front and rear mounts.</li>
                        <li class="price">$654.00 + S&H</li>
                    </ul>
                  </div>
              </div>

Answer 1

首先将 jquery.js 添加到您的页面

HTML 代码是，

     <!-- Thumbnails -->

      <div class="large-8 columns">
          <div class="row container1">
              <div class="large-4 small-6 columns">
                <ul  class="pricing-table" >
                    <li class="title">SUP Racing T-Shirts</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/SUP_Tees.jpg"></li>
                    <li class="description">Show your SUP Racing Pride!</li>
                    <li class="price">$18.00 + S&H</li>
                    <div></div>
                </ul>
              </div>

              <div class="large-4 small-6 columns">
                <ul class="pricing-table">
                    <li class="title">SUP Porting for CR/500</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/SUP_Porting.jpg"></li>
                    <li class="description">Great power and torque throughout the entire power band.</li>
                    <li class="price">$395.00 + S&H</li>
                </ul>
              </div>

              <div class="large-4 small-6 columns">
                <ul class="pricing-table">
                    <li class="title">SUP Pipe for CR/500</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/SUP_Pipe1.jpg"></li>
                    <li class="description">Our custom-designed pipe will give you better torque, and more useable power at a lower R.P.M.
                                            This price includes ceramic coating, silencer, flange, and front and rear mounts.</li>
                    <li class="price">$654.00 + S&H</li>
                </ul>
              </div>
          </div>
          <br><br>
          <div class="row container1">
            <div class="large-4 small-6 columns">
                <ul class="pricing-table">
                    <li class="title">Bored Mikuni TM 38mm</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/Bored_Mikuni.jpg"></li>
                    <li class="description">With this carburetor, you do not need the return line.
                                            If you need a carb tuning kit for your altitude, please call.</li>
                    <li class="price">$275.95 + S&H</li>
                </ul>
            </div>
              <div class="large-4 small-6 columns">
                <ul class="pricing-table">
                    <li class="title">V-Force Reeds</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/V-Force-Reeds.jpg"></li>
                    <li class="description">Description Needed...</li>
                    <li class="price">$148.95 + S&H</li>
                </ul>
              </div>

            <div class="large-4 small-6 columns">
                <ul class="pricing-table">
                    <li class="title">Pro-X Piston Kits</li>
                    <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/pro-x-pistons.jpg"></li>
                    <li class="description">Description needed...</li>
                    <li class="price">$100.00 + S&H</li>
                </ul>
            </div>
          </div>
            <div class="row container1">
                <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">Vertex Piston Kits</li>
                        <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/thumbs/Vertex-Pistons.jpg"></li>
                        <li class="description">Description needed...</li>
                        <li class="price">Ceramic Coating: $190.00<br>
                                        W/O Ceramic Coating: $150.00</li>
                    </ul>
                </div>

                <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">MSD Coils</li>
                        <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/thumbs/MSD_Coils.gif"></li>
                        <li class="description">Description needed...</li>
                        <li class="price">$61.95 + S&H</li>
                    </ul>
                </div>

                <div class="large-4 small-6 columns">
                    <ul class="pricing-table">
                        <li class="title">Billethead</li>
                        <li class="bullet-item"><img src="http://codywd.x10.mx/supracing/img/product-imgs/billetthead2.jpg"></li>
                        <li class="description">Description Needed...</li>
                        <li class="price">$000.00 + S&H</li>
                    </ul>
                  </div>
          </div>
      </div>

  <!-- End Thumbnails -->

然后添加这个 jquery 代码，它将起作用，

   <script>
    function setEqualHeight(columns)
     {
         var tallestcolumn = 0;
         columns.each(
             function()
                 {

                    currentHeight = $(this).height() +160;
                    //alert(currentHeight);
                    if(currentHeight > tallestcolumn)
                        {
                         tallestcolumn  = currentHeight;
                        }
                 }
               );
        //alert(tallestcolumn);
        columns.height(tallestcolumn);
    }
    $(document).ready(function() {
        setEqualHeight($(".container1  > div > ul"));
    });
    </script>