我的网站上有一个包含其他几个div的div。这是div的结构:
<div id="outside-one">
<div class="inside" id="1"></div>
<div class="inside" id="2"></div>
<div class="inside" id="3"></div>
<div class="inside" id="4"></div>
<div class="inside" id="5"></div>
<div class="inside" id="6"></div>
<div class="inside" id="7"></div>
<div class="inside" id="8"></div>
<div class="inside" id="9"></div>
<div class="inside" id="10"></div>
</div>
我想从该父母中删除五个(或X个)子div。我唯一的问题是第一个div(在上面的示例中,id为1)需要留在那里。
我想在css中给他们显示display:none属性,这样就不会删除它们,但是用户不再可以看到它们。
所以基本上我正在寻找一种方法来同时隐藏五个div而不触及那里的第一个div。这个子div的id并不是总是按顺序排列,换句话说,在我触发函数之前我不知道div的id。我想一遍又一遍地运行这个功能。所以我不知道展示的想法是否可行。
使用javascript有没有办法解决这个问题?感谢
答案 0 :(得分:2)
按类名获取这些div的数组(或者如果他们没有类,则可以使用getElementsByTagName
),然后创建一个从1开始的循环(第二个div)而不是0 (第1个div)并设置display: none;
var divs = document.getElementById('parent').getElementsByClassName('inside');
for (var i = 1; i <= 5; i++) {
divs[i].style.display = 'none';
}
&#13;
<div id="parent">
<div class="inside">1</div>
<div class="inside">2</div>
<div class="inside">3</div>
<div class="inside">4</div>
<div class="inside">5</div>
<div class="inside">6</div>
<div class="inside">7</div>
<div class="inside">8</div>
</div>
&#13;
答案 1 :(得分:1)
使用jQuery slice()
方法获取元素集合的子集。
// get element between index 1 and 6
$('#outside-one .inside').slice(1, 5).hide()
// or get all child except first and get first 5 elements
$('#outside-one .inside:not(:first-child)').slice(0, 5).hide()
$('#outside-one .inside').slice(1,6).hide()
// or
$('#outside-one .inside:not(:first-child)').slice(0,5).hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
<div class="inside" id="1">1</div>
<div class="inside" id="2">2</div>
<div class="inside" id="3">3</div>
<div class="inside" id="4">4</div>
<div class="inside" id="5">5</div>
<div class="inside" id="6">6</div>
<div class="inside" id="7">7</div>
<div class="inside" id="8">8</div>
<div class="inside" id="9">9</div>
<div class="inside" id="10">10</div>
</div>
如果你想在结束时选择5个元素
// get all child except first and get last n elements by
// providing negative value as argument
$('#outside-one .inside:not(:first-child)').slice(-5).hide()
$('#outside-one .inside:not(:first-child)').slice(-5).hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
<div class="inside" id="1">1</div>
<div class="inside" id="2">2</div>
<div class="inside" id="3">3</div>
<div class="inside" id="4">4</div>
<div class="inside" id="5">5</div>
<div class="inside" id="6">6</div>
<div class="inside" id="7">7</div>
<div class="inside" id="8">8</div>
<div class="inside" id="9">9</div>
<div class="inside" id="10">10</div>
</div>
更新:使用纯粹的js,您可以使用Array#slice
方法执行相同操作。
// select elements except the first childs and convert it to array
// to converting into array use `[].slice.call()` for older browser
// After converting into array get subset using slice
// iterate over the subset and update the style
Array.from(document.querySelectorAll('#outside-one .inside:not(:first-child)')).slice(0, 5).forEach(function(ele) {
ele.style.display = 'none';
})
Array.from(document.querySelectorAll('#outside-one .inside:not(:first-child)')).slice(0, 5).forEach(function(ele) {
ele.style.display = 'none';
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
<div class="inside" id="1">1</div>
<div class="inside" id="2">2</div>
<div class="inside" id="3">3</div>
<div class="inside" id="4">4</div>
<div class="inside" id="5">5</div>
<div class="inside" id="6">6</div>
<div class="inside" id="7">7</div>
<div class="inside" id="8">8</div>
<div class="inside" id="9">9</div>
<div class="inside" id="10">10</div>
</div>
答案 2 :(得分:0)
jQuery的:
$("#outside-one").find("div:not(:first)").hide();
如果你想使用javascript,它会稍微复杂一些。
答案 3 :(得分:0)
这是简单的实现 你需要什么。
<div class='hide'>A</div>
<div class='hide'>B</div>
<div class='hide' id='1'>C</div>
<script>
function showOne(id) {
$('.hide').not('#' + id).hide();
}
showOne(1);
</script>
答案 4 :(得分:0)
当然可以:
function hideElements(offset, length) {
var insides = $("#outside-one").children();
for(let i = offset; i < offset+length; i++){
$(insides[i]).hide();
}
}
hideElements(1, 5);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outside-one">
<div class="inside" id="1">1</div>
<div class="inside" id="2">2</div>
<div class="inside" id="3">3</div>
<div class="inside" id="4">4</div>
<div class="inside" id="5">5</div>
<div class="inside" id="6">6</div>
<div class="inside" id="7">7</div>
<div class="inside" id="8">8</div>
<div class="inside" id="9">9</div>
<div class="inside" id="10">10</div>
</div>
答案 5 :(得分:0)
一个函数,可以从索引和索引中选择一个选择器来隐藏任何元素范围。用法:hideElements('#outside-one div', 1, 11)
隐藏#outside-one
中除前一个之外的前10个div元素。
function hideElements(selector, f, t){
$(selector).slice(f, t).hide();
}
答案 6 :(得分:0)
您可以将jquery用于此
$('#outside-one div').each(function(index){
if(index > 0 && index < 5){
$(this).hide();
}
})
答案 7 :(得分:0)
这是一种从父母那里删除最后一个 x 孩子的快捷方式,同时始终保留第一个。出于本示例的目的,我使用按钮单击来触发该功能。
这是代码的ES6版本:
{
// Ignore this first line, it's just a lazy way of adding the child divs!
let p=document.getElementById("parent"),d=document.createElement("div"),x=Math.floor(Math.random()*(50-6+1))+6;d.append(document.createTextNode(""));while(x--){d.id=`child${x}`;d.firstChild.nodeValue=`Element ${x}`;p.prepend(d.cloneNode(1));}
// The real code starts here
let children=document.getElementById("parent").children,
length=children.length,
remove=count=>{
if(length)
while(count--&&--length)
children[length].classList.add("hide");
if(!length)
console.log("All elements have been removed");
};
// Event listener to trigger the function
document.addEventListener("click",event=>{
let target=event.target;
if(target.nodeName.toLowerCase()==="button")
remove(parseInt(target.dataset.remove));
},0);
}
&#13;
*{background:#fff;border:0;color:#000;box-sizing:border-box;font-family:sans-serif;font-size:14px;outline:0;padding:0;}button{background:#000;color:#fff;margin:0 5px 5px 0;padding:10px;}div{border:1px solid;padding:5px;}div:nth-child(n+2){margin-top:5px;}
/** The class to be added to the hidden elements **/
div.hide{
display:none;
}
&#13;
<button data-remove="3">Remove 3 Elements</button><button data-remove="4">Remove 4 Elements</button><button data-remove="5">Remove 5 Elements</button>
<div id="parent"></div>
&#13;
这是ES5版本:
(function(d){
// Ignore this first line, it's just a lazy way of adding the child divs!
var p=d.getElementById("parent"),c=d.createElement("div"),x=Math.floor(Math.random()*(50-6+1))+6;c.appendChild(d.createTextNode(""));while(x--){c.id="child"+x;c.firstChild.nodeValue="Element "+x;p.insertBefore(c.cloneNode(1),p.firstChild);}
// The real code starts here
var children=d.getElementById("parent").querySelectorAll("div"),
length=children.length,
remove=function(count){
if(length)
while(count--&&--length)
children[length].classList.add("hide");
if(!length)
console.log("All elements have been removed");
};
// Event listener to trigger the function
d.addEventListener("click",function(event){
var target=event.target;
if(target.nodeName.toLowerCase()==="button")
remove(parseInt(target.dataset.remove));
},0);
})(document);
&#13;
*{background:#fff;border:0;color:#000;box-sizing:border-box;font-family:sans-serif;font-size:14px;outline:0;padding:0;}button{background:#000;color:#fff;margin:0 5px 5px 0;padding:10px;}div{border:1px solid;padding:5px;}div:nth-child(n+2){margin-top:5px;}
/** The class to be added to the hidden elements **/
div.hide{
display:none;
}
&#13;
<button data-remove="3">Remove 3 Elements</button><button data-remove="4">Remove 4 Elements</button><button data-remove="5">Remove 5 Elements</button>
<div id="parent"></div>
&#13;