Question

在以下代码段中，我想在单击按钮时捕获最外面的元素（li .menu-item）。

通常，我可以使用document.querySelector(.menu-item)，但是在这种情况下，这些列表项是动态添加的，因此li类中存在多个menu-item元素。

如何获取最接近的li祖先，以提取其子代的值

<li class="menu-item">
    <div class="item">
        <p>Chicken Veg Roll</p>
        <img src="../../assets/img/menu/tasty-rolls.jpg">
    </div>
    <p class="price">1350.00</p>
    <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>

Answer 1

我对您的情况有一些假设，但是您可以使用closest

来自MDN

Element.closest（）方法返回该对象的最接近祖先当前元素（或当前元素本身）与参数中提供的选择器。如果没有这样的祖先返回null。

看看这个例子

const buttons = document.querySelectorAll('.order-btn');

buttons.forEach(button => button.addEventListener('click', handleClick));

function handleClick(e) {
    e.preventDefault();

    const li = this.closest('li');

    li.style.background = 'red';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="menu-item">
            <div class="item">
                <p>Chicken Veg Roll</p>
                <img src="../../assets/img/menu/tasty-rolls.jpg">
            </div>
            <p class="price">1350.00</p>
            <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
        </li>
        <li class="menu-item">
            <div class="item">
                <p>Chicken Veg Roll</p>
                <img src="../../assets/img/menu/tasty-rolls.jpg">
            </div>
            <p class="price">1350.00</p>
            <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
        </li>
        <li class="menu-item">
            <div class="item">
                <p>Chicken Veg Roll</p>
                <img src="../../assets/img/menu/tasty-rolls.jpg">
            </div>
            <p class="price">1350.00</p>
            <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
        </li>
        <li class="menu-item">
            <div class="item">
                <p>Chicken Veg Roll</p>
                <img src="../../assets/img/menu/tasty-rolls.jpg">
            </div>
            <p class="price">1350.00</p>
            <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
        </li>
        <li class="menu-item">
            <div class="item">
                <p>Chicken Veg Roll</p>
                <img src="../../assets/img/menu/tasty-rolls.jpg">
            </div>
            <p class="price">1350.00</p>
            <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
        </li>
    </ul>
</body>
</html>

如果动态添加li元素，则可能应该实现Event delegation

Answer 2

function clickHandler(event) {
  alert(event.target.parentNode.tagName);
}

<li> Test<br>
<button onclick="clickHandler(event)">Click me</button>
</li>

Answer 3

<li class="menu-item">
    <div class="item">
        <p>Chicken Veg Roll</p>
        <img src="../../assets/img/menu/tasty-rolls.jpg">
    </div>
    <p class="price">1350.00</p>
    <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>   



 document.querySelector(".order-btn").addEventListener("click",function(e){
    console.log(e.target.parentElement);
 });

我可以在HTML中选择HTML元素的最接近祖先（在DOM上行走）吗？

3 个答案: