javascript - 使用类访问特定的子元素

Question

这是一个更广泛项目的一部分，我刚刚将代码分解为它的基础部分。

我想要具体做的是，当您点击按钮时，它应该:

1. 识别点击的元素(目标)
2. 获取其父元素
3. 识别父元素中的 UL 元素
4. 提醒 UL 元素的类名

一切正常，但我不知道如何识别父级的 UL 元素。

function getClassOfUl(e) {
   
  var target = e.target || e.srcElement;
  var parent = target.parentNode;
  
  alert(theparent.***UL***.className);

}

$('.class2').on('click', function(e){
	getClassOfUl(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
   <div class="class2">Click Me</div>
   <ul class="class3"></ul>
</div>

Answer 1

您可以只使用 parent.querySelector('ul') 获取父元素的第一个 ul 子元素。

function getClassOfUl(e) {
   
  var target = e.target || e.srcElement;
  var parent = target.parentNode;
  
  alert(parent.querySelector('ul').className);

}

$('.class2').on('click', function(e){
	getClassOfUl(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
   <div class="class2">Click Me</div>
   <ul class="class3"></ul>
</div>