时间戳

首页 > 解决方案 > 我如何在某些元素之后选择元素

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

问题描述

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

我该怎么做？

标签： javascript

解决方案

在你的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>

推荐阅读