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

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。我有一些媒体查询。由于这个媒体查询，如果我们在 window 宽度小于 400px 时使用它，那么我的内部 div 的第一个原始数据是 inner_1 到 inner_3，第二行是 inner_4 到 inner_6。

我想在内部 div 的第一行插入 <div class="item active"> </div>，在内部 div 的第二行插入 <div class="item"> </div>。

例如：我需要在window宽度大于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>

我需要在window宽度小于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");

那么如果window宽度大于400px它会return6，如果window宽度小于大于 400px 则它将 return 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 宽度触发页面调整大小的代码

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/

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

Append a div before first row of inner div using jQuery

javascript

jquery

jquery-plugins