javascript - 使用 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。我有一些媒体询问。由于这个媒体查询，如果我们在窗口宽度小于 400px 的情况下获取它，那么我的内部 div 的第一个原始数据是inner_1到inner_3，第二行是inner_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

您可以使用 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">');

或者使用窗口宽度来触发页面调整大小的代码

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/