السلام عليكم
كيف استخدم querySelectorAll لتحديد img اذا كانت محاطة ب a ؟
مثلا :
<a href="link" > <img src="imglink" > </a>
كيف استخدم querySelectorAll لتحديد img اذا كانت محاطة ب a؟
يمكن وضع اثنين من Tags بالتسلسل
let images = document.querySelectorAll("a img");
سيعيد الاستعلام جميع الصور،
يمكن المرور عليهم بحلقة
images.forEach((img)=>console.log(img.src));
سوف تطبع مسارات الصور مثلاً
يمكنك تطبيق الدالة على كل صورة لجلب الأب a الخاص بها
images.forEach((img)=>console.log(img.closest("a")));
^^^^^^^^^^^^^^^^^^
إن قرأت سؤالك تفهم أنك تريد الوصول للصورة وليس الرباط، أرجو الانتباه لما تكتب و صيغة السؤال ويمكنك وضع تعليق للتنويه، شكرا لتعاونك
إن كنت تقصد أنك تريد تحديد عناصر a التي لديها صور بداخلها، فيمكنك أن تستخدم has: بالشكل التالي:
const links = document.querySelectorAll('a:has(img)')
console.log(links)
هنا سيتم تحديد أي عنصر a يوجد في داخله صورة img
ما رأيك ان تقوم اولا بتحديد الصور التي هي داخل عنصر a باستخدام المحدد السليل:
a img
ثم المرور على كل عنصر واستبداله بالأب المباشر له (من الطبيعي ان يكون هو الصورة img).
نتحصل بهذا على مجموعة من العناصر a التي تمتلك صورا داخلها.
مثال:
// تحديد الصور التي هي داخل عنصر a
let imgs = document.querySelectorAll('a img');
// المرور على كل عنصر واستبداله بالأب المباشر له
let anchors = Array.from(imgs).map(img => img.parentNode )
// استعراض محتوى HTML لكل عنصر anchor للتأكد من الناتج
anchors.forEach(anchor => {
console.log(anchor.innerHTML)
})
التعليقات