mercredi 23 juin 2021

How to select all the elements of same class inside the last parent div in jQuery?

I am trying to select all elements of the last parent div in the DOM, my DOM gets created with same repeating ids and classNames , so I want to perform action on all the childrens of matching classNames in the last parent div. I want to select all the elements with class viewMoreTextButton of the last parent div i.e slick? I am wondering how to do it, do I need to get the last parent div and loop for same className elemnts or I can use some jQuery built in option.

<div class="slick">
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slick">
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="buttondesign">
            <div class="viewMoreWrapper">
                <div class="viewMoreText viewMoreTextSizing">
                    <h4 class="header">Hello</h4>
                    <p class="number"></p><ul><li>Points<br></li><li>Access<br></li><li>Fee<br></li><li>Warranty<br></li><li>Offers</li></ul><p></p>
                    <span id="otp" class="countdown" style="display:none;"></span>
                </div>
                <div class="textButtonWrapper">
                    <div class="viewMoreTextButton" onclick="doToggleButton(this);" data-viewmore="" data-viewless="">  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



Aucun commentaire:

Enregistrer un commentaire