ابحث عن عرض صورة الطفل وقم بتطبيقه على احتواء الوالدين Div jQuery

Question

انا لدي <img> و البعض <p>داخل أ <div>.

أرغب في الحصول على عرض الطفل IMG وتطبيقه على عرض الوالد Div بحيث تلتزم فقرات النص بنفس عرض IMG.

أريد أن أكون قادرًا على القيام بذلك لتكرارات متعددة على نفس الصفحة.

خلفية:أقوم بتطوير سمة WordPress التي تستخدم المكون الإضافي Masonry jQuery (http://desandro.com/resources/jquery-masonry). موضوعي له شيء مشترك مع موضوع Gridalious (http://suprb.com/apps/gridalicious) ولكن سيتم إملاء عرض ما بعد وأحجامها بعرض الصورة ولن تكون موحدة.

HTML / CSS الخاص بي غير نظيف ، لكن JQuery / JavaScript الخاص بي مهتز للغاية - ولكن إذا كان بإمكاني الحصول على بعض المؤشرات ، فيجب أن أكون قادرًا على العمل معها.

أي مساعدة موضع تقدير حقا.

Answer 1

هذا يعمل تماما. لاحظ أنه يتعين عليك استخدام $ (window) .Load () بدلاً من $ (document) .Ready () ، لأن $ (document). READY () قبل تحميل الصور بالفعل ، وبالتالي لن يكون للصور أي عرض.

$(window).load(function() {
    $('div').each(function() {
        $(this).width($(this).find('img').width());
    });
});

يحرر: لاحظ أن هذا سيبني العرض من أول الصورة في div. ما عليك سوى تغيير الفهرس ([0]) لإبعاده عن صورة أخرى في Div.

تحرير 2: طبق تصحيح جون على وظيفة .width ().

Answer 2

سيجد هذا كل divs على الصفحة ويضع عروضها مساوية لعرض عنصر الطفل IMG.

 $('.divselector').attr('width', $(this).find('img').attr('width'))

Answer 3

لا تحتاج إلى استخدام JavaScript على الإطلاق لهذا الغرض. إذا وضعت الصورة و P في divs للأطفال ، يمكن القيام بذلك بحتة في CSS كما هو الحال في حل كريس (إليك JSFIDDLE: http://jsfiddle.net/glee/qs8gj/ إلى ما يلي سؤال:CSS - تقليص Div الوالد لتناسب عرض طفل وتقييد عرض الطفل الآخر

الحيلة هي تعيين الوالد DIV على ...

display: table-cell;

صورة ديف إلى ...

display: table-row;
width: 1px;

... و DIV يحتوي على نص الفقرة إلى

display: table-cell;
width: 1px;

يعمل مثل السحر!