أدخل عنصر div في كود html المحدد لاحتوائه

مطور
1

يكتشف علامات IMG لجميع صور المستخدمين الرمزية وينشئ div لتغليف علامات IMG لجميع المستخدمين

هل يعرف أحد كيف؟ أقوم بإدراج div في علامة img لصورة المستخدم الرمزية، ثم يمكنني تعيين div المدرج كإطار للصورة الرمزية

2 

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    // البحث عن جميع عناصر img التي لها الفئة avatar
    const avatarImages = document.querySelectorAll('img.avatar');

    avatarImages.forEach(img => {
      // إنشاء عنصر div جديد وتعيين اسمه إلى by9700
      const wrapper = document.createElement('div');
      wrapper.className = 'by9700';

      // نقل عنصر img إلى div الجديد
      img.parentNode.insertBefore(wrapper, img);
      wrapper.appendChild(img);
    });
  });
</script>

يبدو الأمر هكذا، لكن الكود لا يعمل

3

مرحباً :waving_hand: ماذا تريد تحقيقه بالضبط؟ هل هذا شيء غير ممكن باستخدام عنصر CSS الزائف على سبيل المثال؟

إعجابَين (2)
4

يمكن تنفيذ عناصر الفئة الزائفة ولكن يحتاج إلى ضبط موضع كل إطار صورة رمزية، ويمكنه التكيف مع حجم الصورة الرمزية دون استخدام الفئات الزائفة

5

image
image341×428 9.94 KB

أعتقد أنه يعمل – هل يمكنك مشاركة كيفية استخدامك لهذا الرمز؟

ومع ذلك، لدينا أيضًا تغييرات في العناصر في نفس الصفحة. لذلك، أجريت بعض التعديلات على الرمز الخاص بك، والتي يجب أن تلبي المتطلبات:

const throttle = require("@ember/runloop").throttle;

const context = {
  wrapImg() {
    const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
    avatarImages.forEach(img => {
      // إنشاء عنصر div جديد وتعيين فئته إلى by9700
      const wrapper = document.createElement('div');
      wrapper.className = 'by9700';
      // نقل عنصر img إلى div الجديد
      img.parentNode.insertBefore(wrapper, img);
      wrapper.appendChild(img);
      // وضع علامة على img
      img.classList.add("wrapped");
    });
  }
};

new MutationObserver(() => {
  throttle(context, context.wrapImg, 100);
}).observe(document.body, {
  childList: true, // مراقبة التغييرات في العقد الفرعية للهدف، سواء كان هناك إضافة أو حذف
  attributes: false, // عدم مراقبة تغييرات السمات
  subtree: true // مراقبة العقد الفرعية بشكل متكرر
});
إعجاب واحد (1)
6

شكراً جزيلاً على ردك، لقد وجدت حلاً بديلاً، وهو استخدام كود JavaScript لاكتشاف علامة img بفئة avatar وإنشاء علامة div بفئة avatar-wrappers لتغليفها، بحيث يتم إحاطة جميع صور المستخدمين بـ div تم إنشاؤه حديثًا، ثم استخدام عناصر الفئة الزائفة لإضافة إطارات صور مختلفة لأعضاء مجموعات المستخدمين المختلفة عبر CSS لمجموعة المستخدمين. ثم ضبط ارتفاع وعرض إطار الصورة تلقائيًا عن طريق تحديد عرض وارتفاع صورة المستخدم عبر JavaScript. هذا يطبق إطار صورة عالمي للموقع.
لقد شاركت كود JavaScript أدناه

<script type="text/javascript">
  (function() {
    function wrapAvatars() {
      // الحصول على جميع علامات img التي تحتوي على الفئة avatar
      var avatars = document.querySelectorAll('img.avatar');

      // المرور على كل img.avatar
      avatars.forEach(function(avatar) {
        // التحقق مما إذا كانت img مغلفة بالفعل
        if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
          // إنشاء عنصر div جديد
          var wrapper = document.createElement('div');
          
          // إضافة فئة مخصصة لعنصر div الذي تم إنشاؤه حديثًا
          wrapper.className = 'avatar-wrappers';
          
          // تغليف img.avatar في div الجديد
          avatar.parentNode.insertBefore(wrapper, avatar);
          wrapper.appendChild(avatar);
        }
      });
    }

    // الاستماع إلى تحميل الصفحة الأولي
    document.addEventListener('DOMContentLoaded', function() {
      wrapAvatars();

      // استخدام MutationObserver للاستماع إلى تغييرات DOM
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            wrapAvatars();
          }
        });
      });

      // تكوين خيارات المراقب
      var config = { childList: true, subtree: true };
      
      // بدء مراقبة جذر المستند
      observer.observe(document.body, config);
    });
  })();
</script>


<script type="text/javascript">
  (function() {
    function adjustWrapperSizes() {
      // الحصول على جميع علامات div التي تحتوي على الفئة avatar-wrapper
      var wrappers = document.querySelectorAll('div.avatar-wrapper');
      
      // تعيين قيم الزيادة في العرض والارتفاع
      var widthIncrease = 9;  // على سبيل المثال، زيادة 20 بكسل
      var heightIncrease = 9; // على سبيل المثال، زيادة 20 بكسل

      // المرور على كل div.avatar-wrapper
      wrappers.forEach(function(wrapper) {
        // الحصول على عنصر img الفرعي الحالي لـ div
        var img = wrapper.querySelector('img');

        if (img) {
          // الحصول على العرض والارتفاع الفعليين لـ img
          var imgWidth = img.offsetWidth;
          var imgHeight = img.offsetHeight;

          // حساب العرض والارتفاع الجديدين
          var newWidth = imgWidth + widthIncrease;
          var newHeight = imgHeight + heightIncrease;

          // تعيين عرض وارتفاع div
          wrapper.style.width = newWidth + 'px';
          wrapper.style.height = newHeight + 'px';
        }
      });
    }

    // التأكد من التنفيذ عند تحميل محتوى DOM الأولي
    document.addEventListener('DOMContentLoaded', function() {
      adjustWrapperSizes();

      // استخدام MutationObserver للاستماع إلى تغييرات DOM
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            adjustWrapperSizes();
          }
        });
      });

      // تكوين خيارات المراقب
      var config = { childList: true, subtree: true };
      
      // بدء مراقبة جذر المستند
      observer.observe(document.body, config);
    });
  })();
</script>

![Screen Shot 2024-08-03 181537|690x339](upload://20TRpUK67wwSYJXeuVNZ5VUnUFq.jpeg)
إعجاب واحد (1)