0

كيف يمكن نقل عنصر لاسفل القائمة بالجافاسكريبت

السلام عليكم

لدي سؤال ، هل من طريقة بالجافاسكريبت لنقل عنصر ضمن حاوية الى الاسفل اذا احتوى على كلاس ؟

مثلا عندي هذا :

<div class="container">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span class="movit">4</span>
 <span>5</span>
 <span class="movit>6</span>
 <span>7</span>
 <span class=totop"">8</span>
 </div>

اريد نقل movit الى الاسفل و totop لاعلى القائمة

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
Elalfi_Web أضف ردا

يمكن أن تقوم بتغير مكان العناصر من خلال التابع append و التابع prepend، كالتالي:

أولًا نحدد العناصر الأساسية:

var container = document.querySelector('.container'),
    movit = document.querySelectorAll('.movit'),
    totop = document.querySelectorAll('.totop');

الآن لتحريك كل عناصر movit إلى الأسفل نستخدم التابع append:

for (element of movit) {
    container.append(element)
}

ولتحريك كل عناصر totop إلى الأعلى نستخدم التابع prepend:

for (element of totop) {
    container.prepend(element)
}
0
Adnane_Kadri أضف ردا

في jQuery يمكنك نقل عنصر ابن ما إلى أول ترتيب الأبناء في عنصر أب عن طريق التابع prependTo : 

$(element).prependTo(parent)

مثال :

$('.totop').prependTo('.container')

كما يمكنك نقل عنصر ابن ما إلى آخر ترتيب الأبناء في عنصر أب عن طريق التابع appendTo : 

$(element).appendTo(parent)

مثال : 

$('.movit').appendTo('.container')
  • توثيق التابع appendTo :

https://wiki.hsoub.com/jQue...

  • توثيق التابع prependTo:
0
Salah_Beriani أضف ردا

اجابة الأخ سامح تلبي الحاجة و يمكن اختصارها قليلا اذا لم تكن تريد المتغيرات moveit و totop 

 const container = document.querySelector('.container');
    document.querySelectorAll('.movit').forEach((element) => container.append(element));
    document.querySelectorAll('.totop').forEach((element) => container.prepend(element));