Можете ли вы добавить N-го ребенка в JS?

0

Мне было интересно, можно ли добавить какой-нибудь N-й ребенок к этому фрагменту кода?

  $(function() {
    var count = $(".parent a").length;
    $(".parent div").width(function(){
        return ($(".parent").width()/count)-5;
    }).css("margin-right","5px");
  });

Я бы хотел, чтобы последний div игнорировал margin-right

Это возможно?

Теги:
jquery-selectors

3 ответа

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

Как правило, вы можете использовать селектора jQuery, такие как :last :last-child :last-of-type, и считая, что вам не нужен элемент :not.

Однако проблема здесь больше связана с тем, когда и как вы выполняете вычисления ширины и применяете CSS.

Я бы разбил это на несколько шагов, сначала сделайте вычисление ширины:

var count = $(".parent a").length;

$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
});

Затем примените правое поле для всех, кроме последнего div:

$(".parent div:not(:last)").css("margin-right","5px");

Это почти доставляет нас туда, последний бит - просто заполнить оставшийся пробел:

$(".parent div:last").width(function() {
    return $(".parent div:last").width() + 5;
});

И это должно делать то, что вы хотите. Здесь вы можете увидеть рабочий пример - http://jsfiddle.net/jUU86/3/. Я бы, вероятно, пошел и заменил размер поля переменной тоже, так что вам не придется заменять несколько мест, если вы его измените.

Вы можете больше узнать о селекторах, используемых здесь:

Поделиться
  • 0
    Добавление этого останавливает работу всего скрипта: /
  • 0
    Define stops it from working , этот слегка измененный пример работает, как я и ожидал, - jsfiddle.net/jUU86 , покажите нам, что ваш HTML может упростить ситуацию.
Показать ещё 5 комментариев
1

:last-of-type кажется тем, что вам нужно. Я предпочитаю это :last и :last-child потому что более вероятно, что вы хотите продолжить этот тип (div), а не последний.

$(function () {
    var count = $(".parent a").length;
    $(".parent div").width(function () {
        return ($(".parent").width() / count) - 5;
    });
    $(".parent div:not(:last-of-type)").css("margin-right", "5px");
});
Поделиться
  • 0
    Подобно ответу Ллойда, это останавливает работу скрипта
  • 0
    @Adsy Смотрите мои изменения. Это работает? Также постарайтесь быть более конкретным. Что не работает?
Показать ещё 1 комментарий
0

Вы можете добавить его на нечетные/четные числа: count% 2

Поделиться
  • 0
    Рад, что есть способ, но это ничего не значит для меня, ха-ха, я делаю HTML и CSS только на промежуточном уровне

Ещё вопросы

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