使用 jQuery 在内部 div 的第一行之前附加一个 div

Question

我想使用 jQuery 在一些内部 div 之前附加一个 div。这是我的 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 是 inner_1 到 inner_3，第二行是 inner_4 到 inner_6。

我想在内部 div 的第一行插入 <div class="item active"> </div>，在内部 div 的第二个 raw 插入 <div class="item"> </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

你可以使用 lt/gt 伪选择器

如果您想使用您的 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">');

或者使用windows宽度触发页面resize上的代码

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/