我正在使用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>
它在每个定价表的末尾添加了一个白色块（参见这里：http://i.imgur.com/oJm2jsc.png）我已经使用带有基础的内置均衡器包对它进行了测试，并且它完全相同。
如何在描述li中添加白色块而不是在每个ul的末尾添加白色块？
以下是一些示例定价表，如果您也需要它们：
<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>
答案 0 :(得分：0)
首先将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>