如何选择孩子<div>具有特定类名的 div 元素是使用 jQuery 的 DOM 中具有该类名的最后一个 div？

Question

I am trying to select all elements of the last parent div in the DOM, my DOM gets created with same repeating 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 ie 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 id="panel-123">
        <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 id="panel-789">
        <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-456">
        <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-890">
        <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-341">
        <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-256">
        <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>

Answer 1

I'm not sure you are asking your question correctly, but if you simplify it to just the following piece:

• I want to select all the elements with class 'viewMoreTextButton', and do something with them.

That would look like this (jQuery Class Selector):

$(document).ready(function(){
  $(".viewMoreTextButton").css("background-color", "yellow");
});

Note: It helps to put some text in the div and try throwing a simple background color change or 1px solid black border css on whatever you are trying to get when testing selectors (so you can see if you are getting what you want). This will select all of the elements with the class viewMoreTextButton and give them a yellow background.

So then to take this a step further and get the divs with the class viewMoreTextButton to do something such as expand and show more text (as the class name suggests), that would look something like:

$(document).ready(function(){  
  $(".viewMoreTextButton").on('click', function () {
    alert('do something that shows more text here...');                
  });
});

This will add an on click handler to each element with class viewMoreTextButton that you can use to show more text by changing the css of each respective element on click from none to block or whatever you need.