下拉显示更多(XXX)的文字内容获取

京东筛选
前段时间公司让我模仿京东商城官网做页面,做到商品筛选的时候,看到更多选项的按钮的文字,要获取第三个以后的标题,应该不能写死;想了一下就写了下面的代码。
结构大致如下:
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>")

猜你喜欢

转载自blog.csdn.net/CrazBarry/article/details/76851563
今日推荐