0

Подскажите, пожалуйста самый простой способ выбрать 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 оббертку с нужным классом ? Возможно ли это сделать без циклов? ПС. Мой пример отрабатывает только на первом блоке и останавливается

2
  • делайте через $('.block).each(....), вам изменения вносить надо в каждую отдельную ветку дерева. нет особого смысла это пытаться объединить. да и не получится
    – teran
    13 ноя 2017 в 23:42
  • $('.block).each(....) чего? как выбрать первых три элемента? 14 ноя 2017 в 5:47

1 ответ 1

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>

6
  • Метод $(".block").each(function(idx, v){ $(v).children(":lt(3)").wrap("<div class='view_list__leftSide' />"); }) не подходит, он вокруг каждого элемента создает оббертку, а необходимо что б первые три элемента заворачивало в Одну оббертку 14 ноя 2017 в 13:26
  • @BlackStar1991 не правда, дополнил ответ, выполните код, в консоли будет html. все три элемента заворачиваются в один див
    – teran
    14 ноя 2017 в 14:01
  • jsfiddle.net/x0mLny5f 14 ноя 2017 в 14:27
  • 1
    @BlackStar1991 обратите внимание на разницу в wrapAll и wrap
    – teran
    14 ноя 2017 в 14:31
  • да, что-то в верхнем коде у меня было (wrap), а не как в примере внизу wrapAll, изменил
    – teran
    14 ноя 2017 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.