简体   繁体   English

单击某个元素后,向上移动parentNode直到找到特定的父级

[英]When an element is clicked, go up the parentNode until a specific parent is found

I would like to set a click event listener in vanilla javascript on an UL , then on a click inside of that, I want to get the element clicked, check to see if it is an LI, if it is not - go up the parentNode until LI is reached, if it is - get it, if its not - stop at the UL. 我想在UL上的香草javascript中设置一个click事件监听器,然后在其中单击,我想让该元素被单击,检查它是否为LI,如果不是,请执行以下操作-向上运行parentNode直到达到LI,如果达到-如果没有,则获取-停止在UL。

Jsfiddle - https://jsfiddle.net/urbbsu0t/4/ Jsfiddle- https: //jsfiddle.net/urbbsu0t/4/

I tried many methods and read a few articles, but everything I find works when there are no nested elements, ie if I have a single element inside the LI. 我尝试了许多方法并阅读了几篇文章,但是当没有嵌套元素(即,如果我在LI内只有一个元素)时,我发现的所有内容都可以使用。 But how can I compare them if I have many children? 但是如果我有很多孩子,我该如何比较?

Here is an example of an LI element 这是一个LI元素的例子

<li class="service">
  <div class="service-body">

    <h1>Title goes here</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta 
    laborum, excepturi tenetur vero cum!</p>

    <button>button goes here</button>
  </div>
</li>

 const services = document.querySelector('.services'); services.addEventListener('click', function(e) { }) 
 .services { display: flex; justify-content: space-between; } .service {flex 1 30%; max-width: 30%;} 
 <ul class="services"> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sequi ab quod.</p> <button>button goes here</button> </div> </li> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, officiis?</p> <button>button goes here</button> </div> </li> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta laborum, excepturi tenetur vero cum!</p> <button>button goes here</button> </div> </li> </ul> 

You can use Element.closest() : 您可以使用Element.closest()

The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. Element.closest()方法返回与参数中给定的选择器匹配的当前元素(或当前元素本身)的最接近祖先。 If there isn't such an ancestor, it returns null. 如果没有这样的祖先,则返回null。

Example: 例:

 const services = document.querySelector('.services'); services.addEventListener('click', function(e) { const li = e.target.closest('.service'); if(li) li.style.color = 'red'; }); 
 .services { display: flex; justify-content: space-between; } .service {flex 1 30%; max-width: 30%;} 
 <ul class="services"> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sequi ab quod.</p> <button>button goes here</button> </div> </li> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, officiis?</p> <button>button goes here</button> </div> </li> <li class="service"> <div class="service-body"> <h1>Title goes here</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta laborum, excepturi tenetur vero cum!</p> <button>button goes here</button> </div> </li> </ul> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM