مرحبا
أرغب في تعيين عدد ظهور عناصر معينة من div في DOM
على سبيل المثال
أود ان أن يتم حذف باقي عناصر الـ div بعد ظهور 50 عنصر div
وصلت الى هنا في الكود
var xdel = $("#lonline > div");
if(xdel.length > 50){
var a = 51;
$("#lonline > div:nth-child("+a+")").remove();
}
console.log(xdel)
في الكود الحالي يتم تحديد عدد العناصر وبعد وصولهم الى 50
يتم حذف div رقم 51
أريد المساعدة في طريقة استمرار الكود في حذف باقي عناصر div التي تتخطى الـ 50 عنصر
يمكنك الاستمرار في حذف العناصر الزائدة عن 50 عنصرا باستخدام حلقة while مع الكود الذي لديك، بهذه الطريقة ستستمر في حذف العناصر بعد الـ 50 حتى تصل إلى العدد المحدد، الكود الذي يمكن استخدامه كالتالي:
var xdel = $("#lonline > div");
while (xdel.length > 50) {
// حذف آخر عنصر في القائمة
$("#lonline > div").last().remove();
// تحديث xdel بعد الحذف
xdel = $("#lonline > div");
}
حيث نستخدم حلقة while للتحقق باستمرار إذا كان عدد عناصر div في العنصر #lonline أكثر من 50. إذا كان العدد أكبر من 50، نحذف آخر عنصر div في القائمة باستخدام .last().remove(). ثم نقوم بتحديث xdel بعد حذف العنصر لضمان التحقق من العدد الحالي للعناصر بعد كل عملية حذف.
لتنفيذ ما تريد عليك بوضع الأداء الجيد في الإعتبار.
فبدلاً من استخدام $("#lonline > div") لاختيار جميع عناصر الـ div داخل #lonline، استخدم استعلام CSS أكثر كفاءة مثل
$("#lonline > div:nth-child(n+51)")
لتحديد العناصر التي تبدأ من العنصر رقم 51.
ثم استخدام دالة each لتطبيق الحذف على كل عنصر في xdel، لأن xdel سيعود لنا بكائن.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>حذف عناصر div</title>
<style>
#lonline {
display: flex;
flex-wrap: wrap;
}
#lonline div {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 5px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="lonline"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
for (let i = 0; i < 100; i++) {
$('#lonline').append('<div>' + (i + 1) + '</div>');
}
setTimeout(() => {
const xdel = $('#lonline > div:nth-child(n+51)');
xdel.each(function () {
$(this).remove();
});
console.log('عدد العناصر المتبقية:', $('#lonline > div').length);
}, 4000);
});
</script>
</body>
</html>
التعليقات