0

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);
    });
};
Beep
  • 2,737
  • 7
  • 36
  • 85
  • 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?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) – Taplar Nov 13 '18 at 15:15
  • @Taplar no can do, markup comes from thirdparty. – Beep Nov 13 '18 at 15:18
  • 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
  • @Taplar thank you that helps, and yes trying to worth with third part c# CMS systems if difficult on the front end. +1 – Beep Nov 13 '18 at 15:25

0 Answers0