Get only the children of a clicked div element

Question

So I'm building this webpage and I have some photos for slideshow inside divs that open up a modal. I want to get all children of clicked div (myModal). I want to get all divs with class "mySlides" who are the children of a click div with class "myModal". This is my code:

var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
    	showSlides(slideIndex += n);
    }

    function currentSlide(n) {
    	showSlides(slideIndex = n);
    }

    function showSlides(n) {
    	var i;
    	var slides = document.getElementsByClassName("mySlides");
    	console.log(slides);
    	var dots = document.getElementsByClassName("dot1");
    	if (n > 3) {
    		slideIndex = 1;
    	}
    	if (n < 1) {
    		slideIndex = slides.length;
    	}
    	for (i = 0; i < slides.length; i++) {
    		slides[i].style.display = "none";  
    	}
    	for (i = 0; i < dots.length; i++) {
    		dots[i].className = dots[i].className.replace(" active1", "");
    	}
    	slides[slideIndex-1].style.display = "block";  
    	dots[slideIndex-1].className += " active1";
    }

<!-- reference item -->
    <div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg">
    	<a class="myBtn" onclick="getSlides()"></a>
    	<div class="myModal modal1">

    		<!-- Modal content -->
    		<div class="modal1-content">
    		  <span class="close1">&times;</span>
    		  <h2>smth</h2>
    		  <div class="post1-container">
    			<div class="post1-thumb">

    				<div class="slideshow1-container">
    					<div class="mySlides">
    						<div class="numbertext">1 / 3</div>
    						<img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis slike1</div>
    					</div>
    					
    					<div class="mySlides">
    						<div class="numbertext">2 / 3</div>
    						<img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis Slike2</div>
    					</div>
    					
    					<div class="mySlides">
    						<div class="numbertext">3 / 3</div>
    						<img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis Slike3</div>
    					</div>
    					
    					<button class="prev1" onclick="plusSlides(-1)">&#10094;</button>
    					<button class="next1" onclick="plusSlides(1)">&#10095;</button>
    					
    					</div>
    					<br>
    					
    					<div style="text-align:center">
    						<span class="dot1" onclick="currentSlide(1)"></span> 
    						<span class="dot1" onclick="currentSlide(2)"></span> 
    						<span class="dot1" onclick="currentSlide(3)"></span> 
    					</div>	
    			</div>
    			</div>
    		</div>
    	  
    	  </div>
    </div>

I tried using $(this).children but no luck like that:

function getSlides() {
    var slides1 = $(this).children('img').attr('src');
    console.log(slides1);
}

How can I achieve this? I have multiple reference items in my page all with different 3 images to show on modal open. But I want to select only those that are children to the clicked element (as now it returns me all "mySlides" divs).

Answer 1

You can remove onclick="getSlides()" from DOM and Use this Jquery

$('.myBtn').off().on('click',function(){
$(this).next('.myModal').find('.mySlides').each(function(i,v){
    console.log($(v)[0].outerHTML);
   });
});

Answer 2

Look at this. You have to pass getSlides(var) a new variable postContainer.
In this case is: <div class="post1-container">

function getSlides(postContainer) {
    $('.'+postContainer+' .mySlides').each(function(){
       var slideSrc = $(this).find('img').attr('src');
       console.log(slideSrc);
    });  
}

Lets start again:

Using the self object to find the slides

<a class="myBtn" onclick="getSlides($(this))"></a>
//Pass the object to the function

function getSlides(dis) {
    //Search from the object, the nexts .mySlides
    $(dis).next().find('.mySlides').each(function(){
       var slideSrc = $(this).find('img').attr('src');
       console.log(slideSrc);
    });  
}