Get correct HTML array number

I have a few HTML elements that are the same, just different text.

On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.

However I get

[HTMLCollection(1)]

printed twice no matter what show less html section I click on.

Is there a reason for this? and how to fix it.

Objective

I want to get the current element array number so I can scroll to the top of the dynamic array number so I can have many HTML elements and the click scroll top event would only scroll to the top of its own section.

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

    });

};

asked Nov 13 '18 at 15:05

Beep

1,59042153

I mean, your logic is getting the same sections every time. It's finding the container in the sectorpage-strengths (by id so only one on the page), and then getting all the class name elements from those containers. That's going to be the same for every showless you click

– Taplar
Nov 13 '18 at 15:08

@Taplar thanks, so as there are multiple html elements with the same id sectorpage-strengths how would i identify what one i clicked on ?

– Beep
Nov 13 '18 at 15:14

You'd fix your markup. Ids are expected to be unique by web standards. If you want to repeat an identifier, make it a class instead and use a contextual lookup

– Taplar
Nov 13 '18 at 15:15

Possible duplicate of Does ID have to be unique in the whole page?

– Taplar
Nov 13 '18 at 15:15

1

(grumbles something about it being 2018 ...) ok, in that case your primary recourse to working around their stupid non-standard markup would be to use an attribute selector to find the element, such as [id="sectorpage-strengths"] and you'd use that in a contextual lookup so you only find the one wrapper that is related to the show less you clicked, however they are related.

– Taplar
Nov 13 '18 at 15:21

|
show 2 more comments

I have a few HTML elements that are the same, just different text.

On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.

However I get

[HTMLCollection(1)]

printed twice no matter what show less html section I click on.

Is there a reason for this? and how to fix it.

Objective

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

    });

};

asked Nov 13 '18 at 15:05

Beep

1,59042153

I mean, your logic is getting the same sections every time. It's finding the container in the sectorpage-strengths (by id so only one on the page), and then getting all the class name elements from those containers. That's going to be the same for every showless you click

– Taplar
Nov 13 '18 at 15:08

@Taplar thanks, so as there are multiple html elements with the same id sectorpage-strengths how would i identify what one i clicked on ?

– Beep
Nov 13 '18 at 15:14

You'd fix your markup. Ids are expected to be unique by web standards. If you want to repeat an identifier, make it a class instead and use a contextual lookup

– Taplar
Nov 13 '18 at 15:15

Possible duplicate of Does ID have to be unique in the whole page?

– Taplar
Nov 13 '18 at 15:15

1

(grumbles something about it being 2018 ...) ok, in that case your primary recourse to working around their stupid non-standard markup would be to use an attribute selector to find the element, such as [id="sectorpage-strengths"] and you'd use that in a contextual lookup so you only find the one wrapper that is related to the show less you clicked, however they are related.

– Taplar
Nov 13 '18 at 15:21

|
show 2 more comments

I have a few HTML elements that are the same, just different text.

On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.

However I get

[HTMLCollection(1)]

printed twice no matter what show less html section I click on.

Is there a reason for this? and how to fix it.

Objective

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

    });

};

asked Nov 13 '18 at 15:05

Beep

1,59042153

I have a few HTML elements that are the same, just different text.

On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.

However I get

[HTMLCollection(1)]

printed twice no matter what show less html section I click on.

Is there a reason for this? and how to fix it.

Objective

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

    });

};

javascript jquery html arrays scroll

asked Nov 13 '18 at 15:05

Beep

1,59042153

asked Nov 13 '18 at 15:05

Beep

1,59042153

asked Nov 13 '18 at 15:05

Beep

1,59042153

asked Nov 13 '18 at 15:05

Beep

1,59042153

asked Nov 13 '18 at 15:05

Beep

1,59042153

I mean, your logic is getting the same sections every time. It's finding the container in the sectorpage-strengths (by id so only one on the page), and then getting all the class name elements from those containers. That's going to be the same for every showless you click

– Taplar
Nov 13 '18 at 15:08

@Taplar thanks, so as there are multiple html elements with the same id sectorpage-strengths how would i identify what one i clicked on ?

– Beep
Nov 13 '18 at 15:14

You'd fix your markup. Ids are expected to be unique by web standards. If you want to repeat an identifier, make it a class instead and use a contextual lookup

– Taplar
Nov 13 '18 at 15:15

Possible duplicate of Does ID have to be unique in the whole page?

– Taplar
Nov 13 '18 at 15:15

1

(grumbles something about it being 2018 ...) ok, in that case your primary recourse to working around their stupid non-standard markup would be to use an attribute selector to find the element, such as [id="sectorpage-strengths"] and you'd use that in a contextual lookup so you only find the one wrapper that is related to the show less you clicked, however they are related.

– Taplar
Nov 13 '18 at 15:21

|
show 2 more comments

I mean, your logic is getting the same sections every time. It's finding the container in the sectorpage-strengths (by id so only one on the page), and then getting all the class name elements from those containers. That's going to be the same for every showless you click

– Taplar
Nov 13 '18 at 15:08

@Taplar thanks, so as there are multiple html elements with the same id sectorpage-strengths how would i identify what one i clicked on ?

– Beep
Nov 13 '18 at 15:14

You'd fix your markup. Ids are expected to be unique by web standards. If you want to repeat an identifier, make it a class instead and use a contextual lookup

– Taplar
Nov 13 '18 at 15:15

Possible duplicate of Does ID have to be unique in the whole page?

– Taplar
Nov 13 '18 at 15:15

1

(grumbles something about it being 2018 ...) ok, in that case your primary recourse to working around their stupid non-standard markup would be to use an attribute selector to find the element, such as [id="sectorpage-strengths"] and you'd use that in a contextual lookup so you only find the one wrapper that is related to the show less you clicked, however they are related.

– Taplar
Nov 13 '18 at 15:21

I mean, your logic is getting the same sections every time. It's finding the container in the sectorpage-strengths (by id so only one on the page), and then getting all the class name elements from those containers. That's going to be the same for every showless you click

– Taplar
Nov 13 '18 at 15:08

@Taplar thanks, so as there are multiple html elements with the same id sectorpage-strengths how would i identify what one i clicked on ?

– Beep
Nov 13 '18 at 15:14

You'd fix your markup. Ids are expected to be unique by web standards. If you want to repeat an identifier, make it a class instead and use a contextual lookup

– Taplar
Nov 13 '18 at 15:15

Possible duplicate of Does ID have to be unique in the whole page?

– Taplar
Nov 13 '18 at 15:15

(grumbles something about it being 2018 ...) ok, in that case your primary recourse to working around their stupid non-standard markup would be to use an attribute selector to find the element, such as [id="sectorpage-strengths"] and you'd use that in a contextual lookup so you only find the one wrapper that is related to the show less you clicked, however they are related.

– Taplar
Nov 13 '18 at 15:21

|
show 2 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283902%2fget-correct-html-array-number%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky