javascript - 为什么js最接近的方法找不到兄弟元素?
问题描述
注意:据我所知,该closest()
方法在 DOM 树中搜索与指定 CSS 选择器匹配的最接近的元素。
当我点击margin
两个li
元素之间的空格时......它返回null......但如果我替换margin-bottom: 15px;
为padding-bottom
......一切都很好......
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>
解决方案
.closest 方法只遍历父母,而不是孩子。
该区域位于容器 .amenities-filters-inner 中,不在列表元素内,因此找不到 .amenities-id
更改要调试的容器的背景颜色。
.amenities-filters-inner{
background: red;
}
如果您不希望列表项之间存在间隙,请不要使用边距。请改用 padding-top 和 padding-bottom。
最近的()方法遍历元素及其父元素(朝向文档根),直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素,则返回 null。
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
推荐阅读
- javascript - JS - 如何转换两个字符串并作为一个 JSON 对象传递(不是 JSON.parse())
- excel - Range.Fomula Excel VBA 的正确语法是什么
- laravel - Ionic 3:端点请求返回页面 - 如何
- java - Java 继承对象的 equals() 方法
- node.js - Node-rsa 加密来自 pem 文件的公钥并尝试解密,但出现以下错误。(可能是不正确的键)NODEJS
- google-cloud-firestore - 将值附加到 FireStore 文档
- python - 基于其他列复制行值
- php - 将文件内容转换为 UploadedFile
- mysql - 选择日期后没有发票的客户
- javascript - 反应 | 在jsx中渲染html标签