我想使用 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。
请帮忙解决这个问题。
最佳答案
您可以使用 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">');
}
关于javascript - 使用 jQuery 在内部 div 的第一行之前附加一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41094997/