問題描述
Mencocokkan lebar divisi dengan jquery (Matching division widths with jquery)
This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.
‑‑‑‑‑
參考解法
方法 1:
Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});
方法 2:
Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});
方法 3:
Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help
(by Rob Fenwick、Travis J、Sushanth ‑‑、Rob Fenwick)