为什么 js closest 方法找不到兄弟元素？

Question

注意： 据我所知，closest() 方法在 DOM 树中搜索与指定 [=49= 匹配的最近元素]选择器。

当我点击两个 li 元素之间的 margin space 时..它是 return null... 但如果我用 padding-bottom 替换 margin-bottom: 15px;... 一切正常...

CSS代码

.amenities-filters-inner ul li{
    margin-bottom: 15px;
}

图片如果我点击红色标记区域..找不到同级 li 元素..

示例代码

   document.querySelectorAll(".amenities-filters-inner ").forEach(function(item){
    item.addEventListener("click",function(e){
        e.preventDefault();

        let element = null;
        element = e.target.closest(".amenity_id");
        // element = e.target.querySelector(".amenity_id");
         element = element.children[0].children[1];
         element.checked == true ? element.checked = false :  element.checked =true;
       
        let dataId =  + element.getAttribute('data-id');
        console.log(element)
        console.log(dataId)
       
    })
})

 .amenities-filters-inner{
        
            border: 2px dashed royalblue;
            max-width: 300px;
            padding: 1rem;
        }
        ul{
            list-style: none;
            width: 100%;
            margin: 0;
            padding: 0;
           
        }
        li{
            border: 2px solid rgb(133, 129, 129);
            padding: 3px;
        }


.amenities-filters-inner:last-child{
    margin-bottom: 0;
}

.amenities-filters-inner ul li{
    margin-bottom: 20px;
}
.amenities-filters-inner ul li:last-child{
    margin-bottom: 0;
}

.check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: 31px;
    margin-bottom: 0;
    padding-right: 0;
    cursor: pointer;
    font-size: 14px; 
    color: #646464;
}
.check  strong{
    color: #969696;
    font-size: 14px; 
    font-weight: 400;
}

.check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #fff ;
    border-color: #646464;
    border-style:solid;
    border-width:1px;
    border-radius: 2px;
}

.check input:checked ~ .checkmark {
    background-color: #fff;
    border-color: #007FEB;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.check input:checked ~ .checkmark:after {
    display: block;
}
.check .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid ;
    border-color:#007FEB;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

   <div class="amenities-filters-inner">
            <ul>
                <li class="amenity_id">
                    <label class="check ">One <strong>One</strong>
                        <input type="checkbox" class="amenity_data" data-id="1" name="is_name">
                        <span class="checkmark"></span>
                    </label>
                </li>
                <li class="amenity_id">
                    <label class="check ">Two <strong>Two</strong>
                        <input type="checkbox" class="amenity_data" data-id="2"name="is_name">
                        <span class="checkmark"></span>
                    </label>
                </li>
<li class="amenity_id">
                    <label class="check ">Three<strong>Three</strong>
                        <input type="checkbox" class="amenity_data" data-id="3"name="is_name">
                        <span class="checkmark"></span>
                    </label>
                </li>
              
               
            </ul>
        </div>

Answer 1

.closest方法只遍历parents，不遍历children

该区域在容器 .amenities-filters-inner 中而不在列表元素中，因此它找不到 .amenities-id

将容器的背景颜色更改为调试。

.amenities-filters-inner{
  background: red;
}

如果您不希望列表项之间存在间隙，请不要使用边距。请改用 padding-top 和 padding-bottom。

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 2

通过在红色标记区域内单击，您将在两个 <li> 元素之间单击，这意味着您在 <ul> 元素内。在 target 上调用 closest() 可以让你到达 <div>；您正在寻找的是 <ul> 元素内部（即下方）的子元素。尝试改变

element = e.target.closest(".amenity_id");

在你的脚本中

element = e.target.querySelector(".amenity_id");

看看它是否有效。

为什么 js closest 方法找不到兄弟元素？

why js closest method not find sibling element?

html

javascript

search

dom

closest