Question

我有一些Div喜欢这个，我希望set属性能够持续我的自定义div (HRDIV)，之后我需要将hide设置为隐藏最后hrdiv

＆＃13;

<div class="main">
  <div id="content">
    <div class="cols">
      <p>Content number 1</p>
    </div>

    <div class="hrdiv">

      <div class="cols">
        <p>Content number 2</p>
      </div>

      <div class="hrdiv">

        <div class="cols">
          <p>Content number 3</p>
        </div>

        <div class="hrdiv">

        </div>

      </div>

＆＃13;

http://jsfiddle.net/dxqco8t0/

非常感谢你帮助我的朋友......

Answer 1

 let elements = document.querySelectorAll(".hrdiv");
 let last = elements[elements.length - 1];
 last.setAttribute('newattribute', 'example');
 last.style.display = 'none';

Answer 2

var allHrDivs = document.querySelectorAll('#content .hrdiv');
allHrDivs[allHrDivs.length -1].classList.add('xxx');

#content .xxx {
    /* display: none; */
    background-color: red;
}

<div class="main">
  <div id="content">
    <div class="cols">
      <p>Content number 1</p>
    </div>

    <div class="hrdiv">

      <div class="cols">
        <p>Content number 2</p>
      </div>

      <div class="hrdiv">

        <div class="cols">
          <p>Content number 3</p>
        </div>

        <div class="hrdiv">
          LAST HRDIV
        </div>

      </div>

Answer 3

另一种解决方法是，只要仍然有 hrdiv <继续查找带有 hrdiv 类的最后一个 div 标记/ p>

以下是如何执行此操作的示例：

var lastHrDiv = document.querySelectorAll('.hrdiv:last-child')[0];
while(lastHrDiv.querySelectorAll('.hrdiv:last-child').length > 0)
lastHrDiv =  lastHrDiv.querySelectorAll('.hrdiv:last-child')[0];

这是一个完整的例子： https://jsfiddle.net/ep3cm739/2/

Answer 4

因为您有div的课程hrdiv。首先选择此类名的所有元素。

 document.querySelector('hrdiv');

这将返回具有此类名的所有元素。获取最后一个元素并设置隐藏属性。

 document.querySelector('hrdiv').lastElementChild.setAttribute("hidden");

如何用javascript隐藏最后一个自定义div

4 个答案: