Как выбрать потомков от родителя в jQuery?

358

15 ноября 2017, 00:27

Подскажите, пожалуйста самый простой способ выбрать 3-х потомков от одинаковых родителей. Приведу пример

$(".block").children(":lt(3)").wrapAll("<div class='view_list__leftSide' />");

.block { 
  margin-top: 10px; 
  border: 1px solid #000; 
} 
 
.view_list__leftSide { 
  color: #f00; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <p>One</p> 
  <p>Two</p> 
  <span>Three</span> 
  <p>Four</p> 
  <button>Five</button> 
</div> 
<div class="block"> 
  <p class="foo">Six</p> 
  <a href="">Seven</a> 
  <span>Eight</span> 
  <div class="bl_text">Nine</div> 
</div>

Есть некие блоки в середине которых находятся некий неоднородный контент. Задача - Как первых трёх потомков обернуть в div оббертку с нужным классом ? Возможно ли это сделать без циклов? ПС. Мой пример отрабатывает только на первом блоке и останавливается

Answer 1

ваш пример не обрабатывает первый блок и останаливается. Он просто сначала сваливает всех потомков в один список, а потом из них выбирает первые три.

но чем плох вариант с циклами, почему вы хотите их избежать?

$(".block").each(function(idx, v){ 
     $(v).children(":lt(3)").wrapAll("<div class='view_list__leftSide' />");
})

Для некоторых задач (например, изменить стиль, добавить класс и т.п. не требующих операций с DOM), можно было бы перечислить первые 3 элемента каждого блока таким образом:

$(".block > :nth-child(1), .block > :nth-child(2), .block > :nth-child(3)")

и выполнить нужные действия. Но когда речь идет об обертке во внешний html это не прокатывает. Ибо все выбранные элементы оборачиваются в общий див и переносятся в первый .block.

$(".block").each(function(idx, v){ 
  $(v).children(":lt(3)").wrapAll("<div class='view_list__leftSide' />"); 
  console.log( $(v).html()); 
});

.block { 
  margin-top: 10px; 
  border: 1px solid #000; 
} 
 
.view_list__leftSide { 
  color: #f00; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <p>One</p> 
  <p>Two</p> 
  <span>Three</span> 
  <p>Four</p> 
  <button>Five</button> 
</div> 
<div class="block"> 
  <p class="foo">Six</p> 
  <a href="">Seven</a> 
  <span>Eight</span> 
  <div class="bl_text">Nine</div> 
</div>