Перебор всех блоков - jQuery

Question

Здраствуйте , мне надо перебрать все блоки которые есть на странице в 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"));
});
//проблема в том что это-т скрипт не заходит в дочерние элементы , а мне надо перебрать все элементы страницы.

Answer 1

Согласно документации метод each() выполняет итерацию по объекту jQuery, выполняя при этом функцию на каждом СОПОСТОВИМОМ элементе. В вашем случае таким элементом является 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>

Answer 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>

Answer 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>

БЛОГ НА HUSL

Перебор всех блоков - jQuery

Ответы (3 шт):