هل يمكن لـ jQuery نسخ حدود العنصر (الموضع ، الحجم ، الهوامش ، إلخ) إلى عنصر آخر؟
-
28-09-2019 - |
سؤال
لدي عنصر من النوع التعسفي. أرغب في إنشاء عنصر آخر ، من نفس النوع أو نوع مختلف له نفس الموضع وحجم الأول. قد يتم وضع العنصر أو لا يتم وضعه.
على سبيل المثال ، قد أبدأ بـ <select>
مع حجم معين ، ربما يعتمد على محتوياته ، أي عرض/ارتفاع السيارات. أريد إنشاء جديد <div>
يظهر ذلك في نفس الموضع وله نفس الحجم.
لقد حاولت نسخ تعويم العنصر ، واضحة ، وموضع ، وعرض ، وارتفاع ، وهامش ، وحشو ، ولكن هذا أمر مرهق بعض الشيء. أيضًا ، بينما يعمل في Firefox ، أواجه بعض المشكلات الغريبة عند الاختبار على WebKit. قبل أن أقضي المزيد من الوقت في اكتشاف ذلك ، أود أن أعرف ما إذا كانت هناك بعض وظائف واجهة المستخدم jQuery أو jQuery التي تعتني بالفعل بما أريد القيام به.
أدرك أن هذا السؤال مشابه لـ حالي, ، لكن لدي تمييز مهم في الحاجة إلى العمل مع عناصر من أنواع مختلفة ، والتي تمنع clone
كحل.
المحلول
هذا ليس فعالًا أو تم اختباره أو اكتماله. وربما يشبه ما تفعله بالفعل. لكنني اعتقدت أنني سأقوم بنشره على أي حال:
var positioningProps = ["float","position","width","height","left","top","marginLeft","marginTop","paddingLeft","paddingTop"];
var select = $("#mySelect");
var div = $("<div>").hide().before(select);
// don't do this kind of loop in production code
// http://www.vervestudios.co/jsbench/
for(var i in positioningProps){
div.css(positioningProps[i], select.css(positioningProps[i])||"");
}
select.hide();
نصائح أخرى
ماذا عن مجرد نسخ إزاحة العنصر ووضعه على الإطلاق على الصفحة؟
لنفترض أن لديك عنصر إدخال في مكان ما على الصفحة مع أبعاد 100x25px.
<input type="text" id="firstname" style="width: 100px; height: 20px" />
وأردت وضع Div مباشرة فوقه (وإخفاء المدخلات).
// Store the input in a variable
var $firstname = $("#firstname");
// Create a new div and assign the width/height/top/left properties of the input
var $newdiv = $("<div />").css({
'width': $firstname.width(),
'height': $firstname.height(),
'position': 'absolute',
'top': $firstname.offset().top,
'left': $firstname.offset().left
});
// Add the div to the body
$(body).append($newdiv);
يمكنك اكتشاف حدود عناصر باستخدام هذا البرنامج المساعد إلى jQuery. سيكون الأمر مجرد مسألة بسيطة لإعداد أي خصائص تهتم بها للكائن الآخر.
/*
* jQuery.bounds
* author: Andrew Powell
*/
(function($){
$.fn['bounds'] = function()
{
var t = this, e = t[0];
if (!e) return;
var offset = t.offset(), pos = { width:e.offsetWidth, height:e.offsetHeight, left: 0, top: 0, right: 0, bottom: 0, x: 0, y: 0 };
pos.left = offset.left;
pos.top = offset.top;
//right and bottom
pos.right = (pos.left + pos.width);
pos.bottom = (pos.top + pos.height);
pos.x = pos.left;
pos.y = pos.top;
pos.inner = {width: t.width(), height: t.height()};
$.extend(pos, {toString: function(){ var t = this; return 'x: ' + t.x + ' y: ' + t.y + ' width: ' + t.width + ' height: ' + t.height + ' right: ' + t.right + ' bottom: ' + t.bottom; }});
return pos;
};
})(jQuery);