Mix As نشر 28 ديسمبر 2022 أرسل تقرير مشاركة نشر 28 ديسمبر 2022 لنفرض بانه لدي مجموعة من الدفات بالشكل التالي <div id="one">1</div> <div id="tow">2</div> <div id="tow">2</div> <div id="three">3</div> اريد ان يظهر في العرض 1و2و3 فقط اريد عمل كود ديناميكي يكتشف اسم ال id المكرر ويقوم بحذفه وإبقاء واحد فقط 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 28 ديسمبر 2022 أرسل تقرير مشاركة نشر 28 ديسمبر 2022 لا يجب استخدام المعرف نفسه لأكثر من عنصر ولكن على كل حال، يمكننا تنفيذ ما تريده بالشكل التالي : <body> <div id="one">1</div> <div id="one">1</div> <div id="tow">2</div> <div id="tow">2</div> <div id="three">3</div> <div id="three">3</div> <div id="three">3</div> <div id="three">3</div> <script> const allTheElements = Array.from(document.all); const allIds = []; allTheElements.forEach((element) => { if (element.id) { const ids = element.id.split(" "); ids.forEach((id) => { if (allIds.includes(id)) element.remove(); else allIds.push(id); }); } }); </script> </body> حيث Array.from(document.all) تحول قائمة العناصر إلى مصفوفة js. و document.all هي كل عناصر الصفحة. ونفذنا وظيفة تقوم بحفظ الـ id إذا لم يكن موجوداً سابقاً في متغير اسميناه allIds و في حال كان موجوداً من قبل نقوم بحذف العنصر. ولكن العناصر قد تحتوي أكثر من id ولذلك قمنا بتقسيم المعرفات id باستخدام المسافات " " الموجودة بينها لنحصل على مصفوفة من الـ id ونفذنا الوظيفة السابقة على كل معرف منهم من اجل كل عنصر. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 28 ديسمبر 2022 أرسل تقرير مشاركة نشر 28 ديسمبر 2022 يمكنك كفكرة تحضير مصفوفة للعناصر الفريدة ومن ثم المرور على كامل العناصر المراد تفحصها، والقيام بالتالي: التحقق من ما ان كان محتوى العنصر الذي يتم المرور عليه موجودا في مصفوفة العناصر الفريدة في حالة كان ذلك يتم حذف العنصر او اخفاءه في حالة لم يكن ذلك يتم اضافة محتوى العنصر الى مصفوفة العناصر الفريدة مثال: <div class="num">1</div> <div class="num">2</div> <div class="num">2</div> <div class="num">3</div> const nums = document.querySelectorAll('.num') var exists = []; Array.from(nums).map(num => { if(exists.includes(num.innerHTML)){ num.style.display = 'none' return; } exists.push(num.innerHTML) }) انتبه الى انه لم يتم استعمال ذات المعرف id لكامل العناصر، لأن هذا الاخير يفترض ان يكون فريدا مميزا لعنصر واحد. ايضا الى استعمال Array.from لتمكين المرور على nums كمصفوفة واستعمال توابع المصفوفات للتعامل معها. توثيق Array.prototype.map() حسب ويكي حسوب اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي عبد محسن نشر 30 ديسمبر 2022 أرسل تقرير مشاركة نشر 30 ديسمبر 2022 الحل التالي يقوم بالضبط بما تريد ولكنه يعمل على المثال الذي أوردته في سؤالك, فإذا قمت بتعديل html في مثالك فقد تحتاج لتعديل جافاسكربت في الحل الذي وضعناه لك ليعمل بشكل صحيح. لاحظ الكود التالي المشروح يقوم بتصفية عناصر div المكررة إعتماداً على محتواها النصي وليس المعرف id وكما يلي <!DOCTYPE html> <html> <head> <style> .myDiv { border: 5px outset red; background-color: lightblue; text-align: center; } </style> </head> <body> <h1>The div element</h1> <div id="one">1</div> <div id="tow">2</div> <div id="tow">2</div> <div id="three">3</div> <script> (function(){ // نعمل دالة ذاتية الإقلاع بعد ضمان تحميل مستند الصفحة بنجاح // نجلب جميع الحاويات ذات الوسم المطلوب const divs= document.getElementsByTagName("div") let array= Array.from(divs) // نحول الوسوم الناتجة من الخطوة السابقة الى مصفوفة array.forEach( d =>{ // نعمل حلقة تكرار على مصفوفة الوسوم let count=0 // ننشئ متغير لحساب عدد مرات تكرار كل وسم إعتماداً على محتواه النصي Array.from(divs).forEach(x => { // حلقة تكرار داخلية للتحقق من عدم ورود كل وسم بنصص مكرر if(x.textContent=== d.textContent){// شرط إزالة الوسم ذو النص المكرر count++ } }) if(count>1){d.remove()} // نحذف الوسم ذو النص المكرر }) })() </script> </body> </html> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mix As
لنفرض بانه لدي مجموعة من الدفات بالشكل التالي
<div id="one">1</div>
<div id="tow">2</div>
<div id="tow">2</div>
<div id="three">3</div>
اريد ان يظهر في العرض 1و2و3 فقط
اريد عمل كود ديناميكي يكتشف اسم ال id المكرر ويقوم بحذفه وإبقاء واحد فقط
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.