javascript - 获取正确的 HTML 数组编号

Question

我有一些相同的 HTML 元素，只是文本不同。

单击查看更少时，我希望控制台打印出我单击显示更少的数字（列表中的数组对象）。

但是我得到

[HTMLCollection(1)]

无论我点击什么显示较少的 html 部分，都会打印两次。

是否有一个原因？以及如何解决它。

客观的

我想获取当前元素数组编号，以便可以滚动到动态数组编号的顶部，这样我就可以拥有许多 HTML 元素，并且单击滚动顶部事件只会滚动到其自身部分的顶部。

HTML

<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
        <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h2>
                            Commercial Services
                        </h2>
                    </div>
                </div>
            <div class="row sectorpage-strengths-list">
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Datamonitor Healthcare </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Biomedtracker </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Medtrack </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=350&amp;la=en-US&amp;hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Strategic Transactions </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
            </div>


                <div class="row view-all-sectors-btn-container">
                    <span class="center-block view-all-sectors-btn text-center more" role="button">
                        View more
                        <br>
                        <em class="informa-icon glyphicon glyphicon-plus-sign"></em>
                    </span>
                    <span class="center-block view-all-sectors-btn text-center less" role="button">
                        View Less
                        <br>
                        <em class="informa-icon glyphicon glyphicon-minus-sign"></em>
                    </span>
                </div>
        </div>
    </section>

JavaScript

_bindShowLess = function () {
    var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');

    _showLess.on('click', function () {

        var wrapper = $('#sectorpage-strengths');
        var div = wrapper.find('.container');
        var section = [];

        for (var i = 0; i < div.length; i++) {
            section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
        }
        console.log(section);
        $('html, body').animate({
            scrollTop: _sectorPageStrengths.offset().top
        }, 700);
    });
};

标签： javascriptjqueryhtmlarraysscroll