اذهب إلى المحتوى
  • 0

اكتشاف اسم ال id المكرر عن طريق جافا سكربت

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 المكرر ويقوم بحذفه وإبقاء واحد فقط

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لا يجب استخدام المعرف نفسه لأكثر من عنصر ولكن على كل حال، يمكننا تنفيذ ما تريده بالشكل التالي :

<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 ونفذنا الوظيفة السابقة على كل معرف منهم من اجل كل عنصر.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك كفكرة تحضير مصفوفة للعناصر الفريدة ومن ثم المرور على كامل العناصر المراد تفحصها، والقيام بالتالي:

  • التحقق من ما ان كان محتوى العنصر الذي يتم المرور عليه موجودا في مصفوفة العناصر الفريدة 
  • في حالة كان ذلك يتم حذف العنصر او اخفاءه
  • في حالة لم يكن ذلك يتم اضافة محتوى العنصر الى مصفوفة العناصر الفريدة

مثال:

<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 كمصفوفة واستعمال توابع المصفوفات للتعامل معها.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الحل التالي يقوم بالضبط بما تريد ولكنه يعمل على المثال الذي أوردته في سؤالك, فإذا قمت بتعديل 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>
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...