仅获取单击的 div 元素的子元素

Posted 2023-02-25

【中文标题】仅获取单击的 div 元素的子元素

【英文标题】：Get only the children of a clicked div element

【发布时间】：2019-01-14 08:15:04

【问题描述】：

所以我正在构建这个网页，并且我有一些用于在 div 中打开模式的幻灯片的照片。我想获得所有点击 div 的孩子（myModal）。我想获取所有具有“mySlides”类的 div，它们是具有“myModal”类的单击 div 的子级。这是我的代码：

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>

我尝试使用 $(this).children 但没有这样的运气：

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

我怎样才能做到这一点？我的页面中有多个参考项目，所有参考项目都有不同的 3 个图像以在模式打开时显示。但我只想选择那些是单击元素的子元素（因为现在它返回所有“mySlides”div）。

【问题讨论】：

问题是getSlides没有$(this)。我需要知道你如何/在哪里打电话getSlides()

@Roy 哦，我忘了，我在

想要获取所有具有“mySlides”类的 div???

@Sushil 是的，但只有单击的引用项的类“mySlides”的所有 div。

@user3029612 你想得到它<a class="myBtn" onclick="getSlides()"></a>这个按钮点击？？？

【参考方案1】：

您可以从 DOM 中删除 onclick="getSlides()" 并使用此 Jquery

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

【讨论】：

这行得通！你能告诉我如何从中创建一个 html 集合吗？我需要 $(v)[0] 成为一个 html 集合：D

@user3029612 $(v) 是每个<div class="mySlides"> 的集合如果您需要所有<div class="mySlides"> 的HTML 集合，您可以仅使用$(this).next('.myModal')

不，我想为 $(v) 中的那些项目创建 HTMLCollection

$(v) 本身就是一个 HTML 集合对象。您能否详细说明您要执行什么操作，这样会更容易找出问题所在。

【参考方案2】：

看看这个。你必须给getSlides(var)一个新的变量postContainer。 在这种情况下是：<div class="post1-container">

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

让我们重新开始：

使用 self 对象查找幻灯片

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

【讨论】：

我明白这一点，但我应该通过 onclick="getSlides('whatdoIinserthere') 传入 HTML 什么？如果我这样做 onclick="getSlides(myModal') 它会返回我所有的图像...

那是因为你所有的 modal 都有 myModal 类，使用 id 代替

我不能使用 ID，因为我不知道会有多少参考项目，每个项目都需要一个唯一的

但是所有的模态都有一个名为 myModal 的类？