如何在某些元素之后选择元素

debugcn 发表于 Dev

穆罕默德·加马尔（Mohamed Gamal）

我有一些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>

我该怎么办？

qiAlex

在您的HTMLitem是内部的widget，所以这应该工作

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。