JQuery Назначение разницы ширины для элементов <li>

0

У меня есть список html:

<ul>
  <li> first element </li>
  <li> second element </li>
  <li> third element </li>
  <li> 4th element </li> 
  ....
</ul>

с jquery, я хочу назначить для первой <li> ширину равную 10%, а для других <li> (ко второй до последней) остальная ширина делится на числа чисел <li> (например, 90%/5)

Я должен исключить <li> exist un sublist

Как это сделать с помощью JQuery?

Теги:

4 ответа

3
Лучший ответ

вы можете использовать функцию внутри css() и назначить правую ширину, используя этот метод только один раз

var li = $('#outermostlist > li');
li.css('width', function(i) {
    return (i === 0)? '10%' : (90 / (li.length - 1)) + '%'; 
})

пример скрипки http://jsfiddle.net/hzHUn/3/

(Представление Firebug для 4 элементов и 1 вложенный список)

Изображение 174551

Разумеется, обратите внимание на результат, полученный в 90/(li.length - 1): в некоторых случаях сумма всех значений может быть больше 100%, и это может быть не совсем то, что вы хотите: так что, если это так, просто обязательно округлите результат каким-либо образом до предыдущего нижнего целого числа (например, ~~(90/(li.length - 1)));

Поделиться
  • 0
    для 4 элементов, я obtein 11% !!!!
  • 0
    когда я действительно хочу применить это, я препятствую видимости равной длине текста, я не знаю почему
Показать ещё 4 комментария
2

Пытаться

var $lis = $('ul > li');
$lis.eq(0).css('width', '10%');
$lis.slice(1).css('width', (90 / ($lis.length - 1)) + '%');
Поделиться
  • 1
    Черт, ты хороший. Разочарован тем, что вы упустили возможность объединить две последние строки;)
  • 0
    с этим решением вам нужно дважды вызвать метод css (), не очень необходимый
Показать ещё 2 комментария
0

Мое предложение было бы установить width для первого li в CSS, а остальное - с помощью jQuery, как показано ниже:

CSS:

li:first-child{
    width: 10%;
}

JQuery:

$(document).ready(function () {
    var itemWidth = Math.floor(90/($('ul > li').length - 1)); //using Math.floor to make sure it doesn't go beyond 100%
    $('ul > li:not(:first)').css('width', itemWidth + '%');
});

Демо-скрипт

EDIT: IE <= 6 не поддерживает first:child CSS, поэтому приведенную ниже строку сценария можно использовать в jQuery для стилизации первого элемента li.

$('ul > li:first').css('width', '10%');
Поделиться
  • 0
    я не могу использовать первый ребенок, потому что сайт должен быть совместим со всеми версиями IE
  • 0
    Первый ребенок поддерживается в IE7 +. Вы хотите поддерживать IE 6 и менее? Диаграмма поддержки
Показать ещё 2 комментария
0

вы можете попробовать следующее:

JS

$("#myul li:eq(0)").width("10%").css("background", "yellow");
$("#myul li:gt(0)").width("90%").css("background", "red");

обратите внимание, что цвет bg - это просто, чтобы лучше визуализировать результат

FIDDLE http://jsfiddle.net/U9tcV/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню