下拉显示更多（XXX）的文字内容获取

最新推荐文章于 2024-05-02 00:35:53 发布

CrazBarry

最新推荐文章于 2024-05-02 00:35:53 发布

阅读量1.2k

点赞数

分类专栏： js jquery 文章标签： html

本文链接：https://blog.csdn.net/CrazBarry/article/details/76851563

版权

js 同时被 2 个专栏收录

14 篇文章

订阅专栏

jquery

10 篇文章

订阅专栏

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

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>")