如果父级 <a> 具有特定类，如何使用 JavaScript 将 <span> 标签的文本用 <div> 括起来

Question

我有以下代码

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#">Category one</a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#">Category two</a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

并且我想使用javascript将每个A标签的文本包含在具有“hide”类的SPAN中，如果a标签具有具有“team-grid”类的祖父母DIV和具有“t-entry”类的父SPAN -类别'。

所以在上面的例子中结果将是

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#"><span class="hide">Category one</span></a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#"><span class="hide">Category two</span></a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

document.querySelectorAll('.team-grid .t-entry-category > a').forEach(a => {
    a.innerHTML = `<span class="hide">${a.textContent}</span>`;
});