Question

我想在一些内部div之前使用jQuery追加div。这是我的html结构：

p = subprocess.Popen(['mvn', 'surfire:test'])
try:
    p.wait(my_timeout)
except subp.TimeoutExpired:
    p.kill()

这里我的第一行内部div是inner_1到inner_6。我有一些媒体查询。由于这个媒体查询，如果我们在窗口宽度小于400px时采用这个，那么我的内部div的第一个原始是inner_1到inner_3，第二行是inner_4到inner_6。

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

例如：我需要获得 窗口宽度超过400px 的结果

<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>

怎么做？

要计算一行中有多少项，我有以下功能：

<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;
    }

然后，如果窗口宽度超过400px ，它将返回6，如果窗口宽度小于400px ，则它将返回3.

请帮助解决这个问题。

Answer 1

您可以使用lt / 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/

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

1 个答案: