Как установить равную ширину на отделениях с JavaScript
У меня есть пять строк, который похож на это: это - ул. с литиями. Я хочу, чтобы первый литий "текст" был равен на всех строках. Чтобы сделать это, я должен искать самый широкий литий, затем применить новое с ко всему литию.
(ул.> литий> промежуток и ул.)
Текст> Li 1 | литий 2 | Li 3
Textlong> Li 1 | литий 2 | Li 3
Короткий> Li 1 | литий 2 | Li 3
Longer13456> Li 1 | литий 2 | Li 3
Я использовал следующую функцию для установки равных высот. Измененный это немного. Но это не имеет никакого смысла!
function equalWidth() {
var span = $('#tableLookAlike li.tr > span'),
tallest = 0,
thisHeight = 0;
setEqWidth = function(elem) {
elem.each(function() {
widest = 0;
thisWidth = $(this).outerWidth();
console.log(tallest, thisWidth)
// if I remove this it gives me the right width
elem.each(function() {Width)
if (thisWidth > widest) {
widest = thisWidth;
elem.css({'width': widest});
}
});
});
}
setEqWidth(span);
}
Журнал показывает 92, 69, 68, 118, когда я удаляю второй elem.each, и когда я отложил его, он дает мне 92, 130, 168, 206. Кто-либо знает то, что продолжается здесь?
Aynway, как я решаю это?
5 ответов
function equalWidth() {
var span = $('#tableLookAlike li.tr > span'),
widest = 0,
thisWidth = 0;
setEqWidth = function(elem) {
widest = 0;
elem.each(function() {
thisWidth = $(this).outerWidth();
if (thisWidth > widest) {
widest = thisWidth;
}
});
elem.css({ 'width': widest });
}
setEqWidth(span);
}
Помните: явное задание ширины не учитывает padding на рассматриваемых элементах, поэтому если у этих элементов установлены padding-left или padding-right, вы получите ширину, превышающую вашу первоначальную максимальную ширину из-за того, что padding включается в ширину в модели CSS box.
Это даже сделает ваш исходный элемент еще шире, чем он был в начале. То же самое относится к заданию высоты с помощью padding-top и padding-bottom.
Если вы хотите быть сверхточным, вам нужно учитывать padding с помощью чего-то вроде приведенного ниже кода (если вы не используете проценты, эмы или доли пикселей для установки padding, вы можете использовать parseInt( ) вместо parseFloat( )):
var maxWidth = 0;
var $els = $('.your-selector');
$els.each(function(){
var w = $(this).width();
if(w > maxWidth){
maxWidth = w;
}
}
$els.each(function(){
var $el = $(this);
var padding = parseFloat($el.css('padding-left'),100) + parseFloat($el.css('padding-right'),100);
$el.width(maxWidth - padding);
});
Если бы я сделал это, это выглядело бы примерно так:
var greatestWidth = 0; // Stores the greatest width
$(selector).each(function() { // Select the elements you're comparing
var theWidth = $(this).width(); // Grab the current width
if( theWidth > greatestWidth) { // If theWidth > the greatestWidth so far,
greatestWidth = theWidth; // set greatestWidth to theWidth
}
});
$(selector).width(greatestWidth); // Update the elements you were comparing
Вам нужно установить ширину элементов в конце вашего цикла. В противном случае самое широкое значение - это временное максимальное значение.
setEqWidth = function(elem) {
elem.each(function() {
widest = 0;
thisWidth = $(this).outerWidth();
console.log(tallest, thisWidth)
elem.each(function() {
if (thisWidth > widest) {
widest = thisWidth;
}
});
});
elem.css({'width': widest});
}
Немного более сжато
var widest = 0;
$("#tableLookAlike li.tr > span").each(function () { widest = Math.max(widest, $(this).outerWidth()); }).width(widest);