前段时间公司让我模仿京东商城官网做页面,做到商品筛选的时候,看到更多选项的按钮的文字,要获取第三个以后的标题,应该不能写死;想了一下就写了下面的代码。
结构大致如下:
html:
<div class="c-pull-wrapper">
<div class="selector-line-wrap clearfix">
<div class="selector-line">
<div class="selector-line-name">
<span>价格:</span>
</div>
<div class="selector-brand-content">
<div class="selector-line-listwrap">
<ul class="line-list">
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
0-4399
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
4400-5399
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
5400-5699
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
5700-6499
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
6500-7299
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
7300-8799
</a>
</li>
<li class="line-item">
<a href="javascript:void (0)" class="line-item-lk">
<i></i>
8800以上
</a>
</li>
</ul>
<div class="line-price">
<input class="input-txt" type="text">
<em class="input-dian"> - </em>
<input class="input-txt" type="text">
<a href="javascript:void (0)" class="line-btn">确定</a>
</div>
</div>
</div>
</div>
</div>
*5个
</div>
JS
var aSpan = $(".selector-line-wrap .selector-line-name span");
var aPull = [];
for(var i = aSpan.length-1;i>=3;i--){
aPull.push(aSpan[i].innerHTML);
}
var pullText = aPull.reverse().join("、");
pullText = pullText.replace(/:/g,'');
$(".selector-line-more-wrap").html("更多选项("+pullText+")"+"<i class='icon'></i>")