选择具有特定子元素(Span)的所有div并进行样式设置

Question

我需要选择"display: none"并将其赋予所有具有类.span-target的span的articles。在这里，我将给你们举一个例子。

我尝试使用remove = document.querySelectorAll('');，但我只能选择它们，并且不知道如何添加它们、display: none或以某种方式删除它们。

请注意，jQuery不是选项

谢谢你的提醒。

这里的例子：

<article class="class-1">
  <div class="class-2">
    <span class="class-3">Example 1</span>
    <div class="class-4 class-41 class-42">
      <div class="class-5 class-51 class-52">
        <div class="class-6 class-61 class-62 class-63">
          <div class="class-7 class-71 class-72 class-73">
            <div class="class-8 class-81 class-82 class-83">
              <span class="span-1">
                <time class="span-2">Sep 26</time>
                <span class="span-3"></span>
                <span class="span-4"></span>
                <span class="span-target">
                  Please leave
                  <span class="span-5">
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

​

Answer 1

您可以迭代选定的元素并向其添加样式。

Array.from(
  document.querySelectorAll('article')
).forEach(el => {
    let shouldHide = el.querySelectorAll('.span-target').length;
    if (shouldHide) {
        el.style.display = "none";
    }
});

Answer 2

试试下面的代码片段。

​

var remove = document.querySelectorAll('*[class^="span-"]');

for (var i = 0; i < remove.length; ++i) {
   remove[i].classList.add('hide');
}

.hide {
   display: none;
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

​

Answer 3

您只需遍历元素列表并更新它们的css属性：-

获取元素:

var elements = document.getElementsByClassName("span-target");

循环

for (let ele of elements) {

更新它们的css属性

  ele.style.display = "none";

以下是工作代码：

var elements = document.getElementsByClassName("span-target");
for (let ele of elements) {
  ele.style.display = "none";
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

​