Найти индивидуальное смещение всех элементов

Question

Найти индивидуальное смещение всех элементов

0

Я пытаюсь использовать функцию щелчка, чтобы выровнять все выбранные элементы на правом краю. Поскольку использование jQuery offset, у меня нет доступа к offset.right, мне нужно сделать некоторую математику.

У меня есть Javascript, который находит элемент с наибольшим смещением слева, а затем находит элемент с наибольшей шириной. Затем я применяю наибольшее смещение + наибольшую ширину для всех элементов.

$('#align-right').click(function() {
  var x = $('.ui-selected')[0];
  $('.ui-selected').each(function(i, el) {
      if ($(this).offset().left > $(x).offset().left)
          x = el;
  });

  var highestOffset = $(x).offset().left;
  var biggestWidth = $(x).width();

  $('.ui-selected').css('left', highestOffset + biggestWidth);
});

Однако мне также нужно вычесть ширину каждого элемента из этого смещения. Каждый элемент может иметь разную ширину, поэтому я не могу использовать заданное значение.

JSFiddle

colmtuite 07 янв. 2014, в 13:43

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Salman A · Accepted Answer · 2014-01-07T10-02-00.000Z

Найдите элемент "right most", перейдя по всем элементам и вычислив правую = левую + ширину.

После того, как вы разместили элемент, установите слева от каждого элемента = справа от правой части элемента - ширину каждого элемента.

$('#align-right').click(function () {
    var $that = $(".ui-selected:eq(0)");
    $(".ui-selected:gt(0)").each(function () {
        var $this = $(this);
        var thatRight = $that.offset().left + $that.width();
        var thisRight = $this.offset().left + $this.width();
        if (thisRight > thatRight) {
            $that = $this;
        }
    });
    $('.ui-selected').each(function () {
        var thatRight = $that.offset().left + $that.width();
        $(this).css({
            left: thatRight - $(this).width()
        });
    });
});

Демо здесь, не стесняйтесь перетаскивать и/или изменять размеры элементов.

Это выравнивание элементов по левому краю. Я обновил скрипку с различной шириной элементов, чтобы сделать ее более понятной. jsfiddle.net/6VagK/2
Оказывается, это было так же просто, как заменить один x на y.