隐藏所有具有 class= ' contact ' 的元素，只保留 5 个项目 JavaScript

Question

我想隐藏所有具有class='contact'的元素，并使用js或jQuery 只保留5个项目

我在html:中有这个按钮

<div class="text-center mt-4">
<a role="presentation" type="button" class="btn btn-lg hide">hide</a>
</div>

这个脚本：

const thumbnail = $(".contact");
let hiddenThumbnails = 0;
function hideThumbnailsUntil(index) {
for (var i = hiddenThumbnails; i >= index; i--) {
if (i < thumbnail.length) {
$(thumbnail[i]).addClass('visible');
hiddenThumbnails--;
} else {
break;
}
}
}
hideThumbnailsUntil(4);
$(".hide").on("click", function() {
showThumbnailsUntil(hiddenThumbnails + 4)
if (hiddenThumbnails === thumbnails.length) {
$(".hide").fadeOut();
}
})

我添加了这个按钮，但它不起作用。它不会隐藏所有具有class='contact'的元素，只保留5个项目

如何修复？

Answer 1

如果所有元素的父元素相同，则可以使用:nth-child(n+6)选择器。

$("#hide").on("click", function() {
$(".contact:nth-child(n+6)").hide("slow");
});
$("#show").on("click", function() {
$(".contact:nth-child(n+6)").show("slow");
});

.wrapper {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.contact {
padding: 12px;
margin: 20px;
background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="show">Show</button>
<div class="wrapper">
<div class="contact">Thumbnail 1</div>
<div class="contact">Thumbnail 2</div>
<div class="contact">Thumbnail 3</div>
<div class="contact">Thumbnail 4</div>
<div class="contact">Thumbnail 5</div>
<div class="contact">Thumbnail 6</div>
<div class="contact">Thumbnail 7</div>
<div class="contact">Thumbnail 8</div>
</div>

Answer 2

您可以使用Vanilla JS:来完成此操作

const contactElements = document.querySelectorAll('.contact')
contactElements.forEach((elem, i) => {
// If i is less than or equal to 4, that means the current iteration is one of the first 5 elements.
if (i > 4) {
elem.style.display = 'none'
// Or add a class
// elem.classList.add('hidden')
}
})

Answer 3

您可以这样做：

//i want hide all element that have class= ' contact ' and keep just 5 items using js or jQuery
document.querySelectorAll('.hide')[0].addEventListener('click', function() { // click event
let el2hide = document.querySelectorAll('.contact'); // the class we want to hide
for (var i=0; i < el2hide.length; i++) { 
if (i > 4) { // start after 5
el2hide[i].classList.add('hidden'); // hide them
};
}
});

a {color: blue; text-decoration: underline;}
.hidden {opacity: 0.1}

<div class="text-center mt-4">
<a role="presentation" type="button" class="btn btn-lg hide">click to "hide"</a>
</div>
<h1>Deom .contact elements:</h1>
<ol>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
<li class="contact">contact</li>
</ol>

Answer 4

我用:nth-child(n+6)选择器将Rohit的答案翻译为vanillaJS。

const contactElements = document.querySelectorAll('.contact:nth-child(n+6)');
const hideBtn = document.querySelector('#hide');
hideBtn.addEventListener('click', () => contactElements.forEach(elm => elm.style.display = 'none'));

.wrapper {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.contact {
padding: 12px;
margin: 20px;
background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<div class="wrapper">
<div class="contact">Thumbnail 1</div>
<div class="contact">Thumbnail 2</div>
<div class="contact">Thumbnail 3</div>
<div class="contact">Thumbnail 4</div>
<div class="contact">Thumbnail 5</div>
<div class="contact">Thumbnail 6</div>
<div class="contact">Thumbnail 7</div>
<div class="contact">Thumbnail 8</div>
</div>