Добавить div перед первой строкой внутреннего div с помощью jQuery

Question

Я хочу добавить div перед некоторым внутренним div, используя jQuery. Это мой HTML структура:

<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false"> 
    <div class="carousel-inner" role="listbox"> 

     <div class="inner inner_1">1</div> 
     <div class="inner inner_2">2</div> 
     <div class="inner inner_3">3</div> 
     <div class="inner inner_4">4</div> 
     <div class="inner inner_5">5</div> 
     <div class="inner inner_6">6</div> 
    </div> 
    </div> 

Вот мой первый ряд внутренней DIV является inner_1 к inner_6. У меня есть медиа-запросы. Из-за этого медиа-запроса, если мы возьмем это в ширину окна менее 400 пикселей, тогда мое первое сырое внутреннее div будет внутренним_1 до inner_3, вторая строка - внутренним_4 до inner_6.

Я хочу вставить <div class="item active"> </div> в первый ряд внутренних div и <div class="item"> </div> во втором сыром внутреннего div.

Например: результат мне нужно получить в окна шириной более 400px является

<div class="item active"> 
     <div class="inner inner_1">1</div> 
     <div class="inner inner_2">2</div> 
     <div class="inner inner_3">3</div> 
     <div class="inner inner_4">4</div> 
     <div class="inner inner_5">5</div> 
     <div class="inner inner_6">6</div> 
</div> 

В результате мне нужно получить в окна шириной менее 400px является

<div class="item active"> 
     <div class="inner inner_1">1</div> 
     <div class="inner inner_2">2</div> 
     <div class="inner inner_3">3</div> 
</div>  

<div class="item"> 
     <div class="inner inner_4">4</div> 
     <div class="inner inner_5">5</div> 
     <div class="inner inner_6">6</div> 
</div> 

Как это сделать?

Чтобы вычислить, сколько элементов в строке У меня есть следующие функции:

function countFirstRowItems(parentSelector, childSelector){ 
     var count = 0, theTop = undefined; 
     $(parentSelector + " > " + childSelector).each(function(){ 
      var thisTop = $(this).offset().top; 
      if(theTop === undefined){ 
       theTop = thisTop; 
      } 
      if(thisTop != theTop){ 
       return false; 
      } 
      count++; 
     }); 
     return count; 
    } 

так, если мы пишем

var no_first_row_item=countFirstRowItems(".carousel-inner",".inner"); 

затем, если ширина окна более 400px вернет 6 , и если ширина окна меньше 400px, то он вернется 3.

Пожалуйста, помогите решить эту проблему.

Answer 1

Вы можете использовать л/GT pseudoselector

, если вы хотите использовать значение no_first_row_item вам нужно будет сделать что-то вроде

var no_first_row_item=countFirstRowItems(".carousel-inner",".inner"); 
$('.inner').unwrap(); 
$('.inner:lt('+no_first_row_item+')').wrapAll('<div class="item active">'); 
$('.inner:gt('+(no_first_row_item-1)+')').wrapAll('<div class="item">'); 

или использовать ширину окна, чтобы вызвать код на странице изменения размера

var width = $(window).width(); 

if(width > 400) { 
$('.inner').unwrap(); 
$('.inner').wrapAll('<div class="item active">'); 
} else { 
$('.inner').unwrap(); 
    $('.inner:lt(3)').wrapAll('<div class="item active">'); 
    $('.inner:gt(2)').wrapAll('<div class="item">'); 
} 

демо: https://jsfiddle.net/Lk3pgtje/1/