主页 / 问题 / 1421699
Accepted
Igor Biyar
Asked:2022-08-19 08:47:02 +0000 UTC2022-08-19 08:47:02 +0000 UTC

循环遍历所有块 - jQuery

  • 772

您好，我需要将页面上的所有块迭代到body所有子块中。我怎样才能做到这一点 ？

<body>
   <div>
      <div>1</div>
      <div>1</div>
   </div>
   <p>some text <span>3</span><p>
</body>

$("body").each(function(){
 console.log($(this).css("background"));
});
//проблема в том что это-т скрипт не заходит в дочерние элементы , а мне надо перебрать все элементы страницы.
javascript html

3 个回答

  1. Best Answer

    根据文档，该方法each()迭代 jQuery 对象，同时在每个 COMPATIBLE 元素上执行该函数。在您的情况下，该元素是body. 要遍历所有子元素，您可以children()使用$('body'). 并且要选择您感兴趣的元素（相同的<div></div>, <p></p>），您可以尝试以下代码：

    $('body').children('div, p').each(function() {
  $(this).css({
    "background": "#000",
    "color": "#fff"
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div>
    <div>1
      <div>1.1</div>
      <div>2.1
        <div>2.1.1</div>
        <div>2.1.2</div>
      </div>
    </div>
    <div>1</div>
  </div>
  <p>some text <span>3</span>
    <p>
</body>

    • 1

  2. 选项使用css

    body > * {
  background-color: #ccc;
}
    <body>
   <div>
      <div>1</div>
      <div>1</div>
   </div>
   <p>some text <span>3</span><p>
</body>

    选项使用js

    const bodyChilds = document.querySelectorAll('body > *');
bodyChilds.forEach(el => el.classList.add('bg'))
    .bg {
  background-color: #ccc;
}
    <body>
  <div>
    <div>1</div>
    <div>1</div>
  </div>
  <p>some text <span>3</span><p>
</body>

    • 0

  3. 如果要设置样式，则不必使用.each().

    $('body div, body p').css({
  "background": "#000",
  "color": "#fff"
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div>
    <div>1
      <div>1.1</div>
      <div>2.1
        <div>2.1.1</div>
        <div>2.1.2</div>
      </div>
    </div>
    <div>1</div>
  </div>
  <p>some text <span>3</span>
    <p>
</body>

    • 0

相关问题