javascript - 我如何在某些元素之后选择元素

Question

我有一些 HTML 和 JavaScript 元素，但无法选择主元素之后的元素

function LazyCate(i, s, a) {
  function g() {
    for (var g = document.querySelectorAll('.cate-sections .widget'), R = 0; R < g.length; R++) {
      var _ = g[R];
      if (_.getBoundingClientRect().top - document.body.getBoundingClientRect().top < window.pageYOffset + window.innerHeight || a) {

        if (s) var e = _.closest(s).offsetWidth,
          t = _.closest(s).offsetHeight;
        else t = _.hasAttribute('width') && _.hasAttribute('height') ? (e = Math.ceil(_.getAttribute('width')), Math.ceil(_.getAttribute('height'))) : _.hasAttribute('data-original-width') && _.hasAttribute('data-original-height') ? (e = Math.ceil(_.getAttribute('data-original-width')), Math.ceil(_.getAttribute('data-original-height'))) : (e = Math.ceil(_.parentNode.offsetWidth), Math.ceil(_.parentNode.offsetHeight));
        _.parentNode.classList.add('rendered');


        _.closest('.Item'); // i want select this after (var g *document.querySelectorAll('.cate-sections .widget')*)...


        $(".cate-sections .headline").fadeIn(500);

      }
    }
  }
  a ? g() : document.addEventListener('scroll', g)
}
LazyCate();

此代码为 HTML ..

<div class="widget HTML" data-version="2" id="HTML5">
  <h6 class="headLine">Title</h6>
  <div class="widget-content">
    <div class="item" />
    <!-- I want select this element after (class='widget') in top -->
  </div>
</div>

我该怎么做？

Answer 1

在您的 HTML item 中，位于小部件内，因此这应该可以工作

var _ = document.querySelector(`.widget`)

var elItem = _.querySelector(`.item`)
// so just replace _.closest('.Item'); with _.querySelector(`.item`)

console.log(elItem)

<div class="widget HTML" data-version="2" id="HTML5">
  <h6 class="headLine">Title</h6>
  <div class="widget-content">
    <div class="item"/>
    </div>
  </div>
</div>

如果您的item元素位于widget之后并且与widget处于同一级别

var elItem = document.querySelector(`.widget + .item`)
console.log(elItem)

<div class="widget HTML" data-version="2" id="HTML5">
  <h6 class="headLine">Title</h6>
  <div class="widget-content">
  </div>
</div>
    
<div class="item"/></div>