查找动态添加 elem.firstChild

Question

我有一些代码可以动态添加带有内容的标签。删除标签时，eventListener 会启动一个回调函数，该函数将标签+内容的数组作为参数。

[newTab] - 动态创建的标签数组

[newContent] - 动态创建的 div 数组（标签内容）这是它的代码：

    tabSpan.addEventListener("click", removeTab([newTab, newContent]));

问题是，当我删除带有 class active 的选项卡时，我需要将此 class 传递给数组中的第一个选项卡（如果存在），如果不是 - 什么也不做。我要解决的问题是我的 removeTab 函数没有得到 newTab 数组的第一个子项。

    //Remove tab
    function removeTab(nodeArr) {
    return function() {


        nodeArr.forEach(function(el) {

           el.parentNode && el.parentNode.removeChild(el);

        });

        console.log(tabs.closest("li.item"));
    };
 }

console.log 显示 null

在我的案例中，如何检索 firstChild 以将 class active 传递给它？

HTML（不要注意defaultTab，在这种情况下它不算作firstChild） :

<div class="wrap">

    <ul id="tabs">

        <li id="defaultTab" class="tab default">
                <span>+</span>
        </li>


    </ul><!--Tabs ul End-->

    <div id="defaultDiv" class="content default">

    </div>

JS Bin DEMO

Answer 1

它显示为 null，因为 closest 正在寻找它的父项，而不是子项。

什么是 closest() 方法？

根据MDN

The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.

什么是祖先？

根据W3school

An ancestor is a parent, grandparent, great-grandparent, and so on.

所以我们应该寻找子元素。我们可以在这里使用querySelector()。

什么是querySelector？

根据MDN

Returns the first element within the document

我们还必须避免 javascript 在 DOM 之前加载并且可以在这里使用 setTimeout。所以最终代码是

setTimeout(function waitDom() {
    tabs.querySelector("*").classList.add("active");
    defaultDiv.querySelector("*").classList.add("active");
   }, 0);
};

查找动态添加 elem.firstChild

Find dynamically added elem.firstChild

javascript

event-listener

dynamic-arrays

什么是 closest() 方法？

什么是祖先？

什么是querySelector？

Here 是工作提琴手。