[DOM traversal] استبدال دالة next باسم ال div المطلوب

محمد المصري12 · 17 سبتمبر 2021

سلام عليكم

عملت الكود ده لاظهار صورة في ال div الذي يلي القائمة المنسدلة ، و يعمل بامتياز


// change Image After select For others
$("body").on("change", ".show-image", function () {

  var img = $(this).find('option:selected').attr("img");
  var type = $(this).find('option:selected').attr("type");
  var showImage = `<img src="assets/images/${type}/${img}" style="max-height: 50px !important;max-width: 120px;">`;
  $(this).parent().parent().next().next().empty();
  $(this).parent().parent().next().next().append(showImage);

});

لكن في بعض مواضع احتاج لوضع محتوى بجانب القائمة و جعل ال div الذي يستقبل الصورة لا يلي div القائمة مباشرة و بالتالي اضطر لاستخدام دالة next مرات عديدة لاصل لل div المطلوب و جربت اختصار ذلك

جربت استدعي ال parent و بعده مباشرة استدعي ال child باسم ال classname كالتالي

        $(this).parent('div.p').children().find("div.baby").empty();
        $(this).parent('div.p').children().find("div.baby").append(showImage);

لكن لم تعمل

كود html

<div class="col-12 mb-2 row d-flex align-items-center maintickets-fields p"> <!-- Parent DIV -->
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<div class="col-5">

<div class="input-group">


<select class="form-control show-image-pak maintickets-value p-0 mb-3" required>

<option selected disabled value=""> تحديد التيكيت الرئيسي </option>

<?php

$result = $conn->query("SELECT * FROM mainticket");

while ($row = $result->fetch_assoc()) {
if (empty($row['name'])){

echo '<option type="main_ticket" img="' . $row['image'] . '" value="' . $row['id'] . '">كود التيكيت الرئيسي MT' . $row['id'] . '/ لم يتم تسجيل اسم للتيكيت الرئيسي</option>';
}
else {

echo '<option class="text-danger" type="main_ticket" img="' . $row['image'] . '" value="' . $row['id'] . '">كود التيكيت الرئيسي MT' . $row['id'] . '/ اسم التيكيت الرئيسي - ' . $row['name'] . '</option>';
}
}

?>

</select>

</div>

</div>

<div class="col-4 p-0 mb-3">

<input type = "text" class = "form-control install" placeholder = "مكان التثبيت" required>

</div>

<div class="col-2 p-2 mb-3 button ">

<a class="btn yourclass btn-warning" href="" target="_blank"  role="button">تفاصيل</a>

</div>

    <!-- Code response to get item pic found in includes/js.php -->

    <div class="col-1 p-2 mb-3 baby "> <!-- Targer div -->
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    </div>

انتظر مساعدتي في تصحيح الخطأ

شرف الدين حفني · 17 سبتمبر 2021

حسب فهمي فأنت تريد أن يكون هنالك صورة بجانب القائمة عندما ﻻ يكون هناك محتوى, ولكن عند توفر محتوى ما يجب أن تنتقل الصورة الى جانب المحتوى بدلاً من أن تكون بجانب القائمة مباشرةً , هل فهمتك بشكل صحيح؟

محمد المصري12 · 17 سبتمبر 2021

كلا ليس هذا ما قصدت ، ربما اكون قد اخطأت بسرد السؤال

في الصور شرح ما اريد

المطلوب

عاوز اوصل لل div التابع باسمه مباشرة من غير افضل اعمل next كتير ، لاني وارد اضيف قبله اي محتوى ، فبالتالي لو استخدمت الترتيب ، و جيت بعد كده اضيف محتوى لازم ارجع تاني للسكربت و اعدل الترتيب من جديد عشان الصورة تظهر في مكانها الصح

خالص شكري لمساعدتكم الكريمة

سمير عبود · 17 سبتمبر 2021

بتاريخ منذ ساعة مضت قال محمد المصري5:

كلا ليس هذا ما قصدت ، ربما اكون قد اخطأت بسرد السؤال

في الصور شرح ما اريد

المطلوب

عاوز اوصل لل div التابع باسمه مباشرة من غير افضل اعمل next كتير ، لاني وارد اضيف قبله اي محتوى ، فبالتالي لو استخدمت الترتيب ، و جيت بعد كده اضيف محتوى لازم ارجع تاني للسكربت و اعدل الترتيب من جديد عشان الصورة تظهر في مكانها الصح

خالص شكري لمساعدتكم الكريمة

بفرض أن العُنصر الذي سبب إفتعال الحدث و العُنصر الذي تُريد الوصول إليه هما في نفس المُستوى بإمكانك إعطاء ذلك العُنصر الذي تريد الوصول له صنف تنسيقات مثلا code_img ثم تستخدم إما التابع siblings بهذا الشكل:

$(this).siblings(".code_img")

أو تجلب الأب المشترك و الذي من خلاله تبحث عن العُنصر المطلوب بإستخدام التابع children او find على حسب هيكلية العناصر لديك.

ملاحظة لا تستخدم التوابع بكثرة إن كان لديك عُنصر تستخدمه أكثر من مرة من الأفضل تخزينه في متغير.

محمد المصري12 · 17 سبتمبر 2021

بتاريخ 16 دقائق مضت قال عبود سمير:
بفرض أن العُنصر الذي سبب إفتعال الحدث و العُنصر الذي تُريد الوصول إليه هما في نفس المُستوى بإمكانك إعطاء ذلك العُنصر الذي تريد الوصول له صنف تنسيقات مثلا code_img ثم تستخدم إما التابع siblings بهذا الشكل:
$(this).siblings(".code_img")
أو تجلب الأب المشترك و الذي من خلاله تبحث عن العُنصر المطلوب بإستخدام التابع children او find على حسب هيكلية العناصر لديك.

ملاحظة لا تستخدم التوابع بكثرة إن كان لديك عُنصر تستخدمه أكثر من مرة من الأفضل تخزينه في متغير.

نجح الأمر و لله الحمد ، شكرا لك استاذنا
لو عند حضرتك اي document اراجعها بخصوص تخزينه في متغير

تم التعديل في 17 سبتمبر 2021 بواسطة محمد المصري5

سمير عبود · 17 سبتمبر 2021

بتاريخ 25 دقائق مضت قال محمد المصري5:

نجح الأمر و لله الحمد ، شكرا لك استاذنا
لو عند حضرتك اي document اراجعها بخصوص تخزينه في متغير

ما قصدته مثلاً هنا:

$(this).parent('div.p').children().find("div.baby").empty();
$(this).parent('div.p').children().find("div.baby").append(showImage);

انت تبحث عن العُنصر مرتين و هذا الشيء ليس جيد فالأفضل أن تُخزن العُنصر الذي بحثت عنه في متغير:

var $imgElem = $(this).parent('div.p').children().find("div.baby");
$imgElem.empty();
$imgElem.append(showImage);

محمد المصري12 · 17 سبتمبر 2021

بتاريخ 3 ساعات قال عبود سمير:
ما قصدته مثلاً هنا:
$(this).parent('div.p').children().find("div.baby").empty();
$(this).parent('div.p').children().find("div.baby").append(showImage);
انت تبحث عن العُنصر مرتين و هذا الشيء ليس جيد فالأفضل أن تُخزن العُنصر الذي بحثت عنه في متغير:
var $imgElem = $(this).parent('div.p').children().find("div.baby");
$imgElem.empty();
$imgElem.append(showImage);

الان فهمت ، انا اقوم بذلك فعلا لكن شلت المتغير عشان احاول اوضح السؤال

شكرا جزيلا لك

[DOM traversal] استبدال دالة next باسم ال div المطلوب

السؤال

محمد المصري12

6 أجوبة على هذا السؤال

Recommended Posts

شرف الدين حفني

محمد المصري12

سمير عبود

محمد المصري12

سمير عبود

محمد المصري12

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية