Выводите родные элементы рядом друг с другом, используя jQuery

0

Я пытаюсь создать большие пальцы рядом друг с другом, но он не работает. Кажется, они выводят их друг на друга. Я хочу, чтобы они были на расстоянии 5 пикселей.

--- Мне нужно позиционирование, чтобы быть абсолютным. Мне нужно это, чтобы после того, как я достал их все рядом друг с другом, я хочу, чтобы тот, который нажал, увеличился, а все слева налево должны исчезнуть слева, все права должны идти вправо. Абсолютное позиционирование необходимо, чтобы я мог контролировать это.

HTML

<div class="portItem">
    <div class="itemContent-wrap">
        <div class="itemContent">
            <div class="container">
                <div class="thumbWrap">
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.thumb {
  height: 200px;
  width: 450px;
  position: absolute;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
  transition: all 1s ease-in-out;
  top: 0;
  left: 0;
}

Javascript

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $('.thumb', this).each(function(i) {
              $('.thumb').css('left',40*i);
         }).appendTo('.body');
     });
});

Скрипт: http://jsfiddle.net/nTHDk/11/

Решение !: http://jsfiddle.net/nTHDk/14/

Заранее спасибо!

Теги:
position

4 ответа

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

$('.thumb').css('left',40*i); Большой $('.thumb').css('left',40*i); должен быть $(this).css('left',40*i); , Вы выбрали все элементы .thumb в DOM, но вы уже выбрали правильный .thumb в этой точке.

http://jsfiddle.net/nTHDk/8/

Поделиться
  • 0
    По-прежнему выводится только один прямоугольник (даже в прикрепленной скрипке). Спасибо
  • 0
    @yahyanono Забавно, кто-то добавил скрипку в мой ответ. Прямоугольники расположены правильно, просто они расположены в шахматном порядке только на 40px но 450px ширину 450px поэтому они перекрывают друг 450px . Проверьте это демо, где я сделал ваши divs уже: jsfiddle.net/nTHDk/8
Показать ещё 8 комментариев
2

у вас много опечаток в вашем коде:

см. этот обновленный Fiddle

  1. вы не добавили JQuery к своей скрипке.
  2. в скрипке вам не нужно писать document.ready
  3. для каждого выбора используйте $(this).css('left',40*i +"px"); // замечаем это и px
  4. размеры ящика слишком велики, чтобы заметить движение, я уменьшил их.
  5. Я удалил appendTo, элементы уже находятся в вашем DOM (вы хотели их переместить?)
  6. если вы хотите использовать функцию appenedTo, установите селектор в значение $('body')
Поделиться
  • 1
    px не обязателен, так как jQuery интерпретирует целые числа как значения пикселей.
  • 0
    1) правда, мой плохой 2) круто, спасибо 3) не думаю, что px имеет значение 4) мне нужно, чтобы они были такого размера, хотя 5) нет, это нормально 6) не могу поставить $ сразу после appendTo .. Я не думаю, что это проблема.
0

Прежде всего добавьте jQuery в свою скрипку, и вы фактически перемещаете все элементы.thumb во внутреннем каждом цикле, вы должны использовать $ (this), например:

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $(this).find('.thumb').each(function(i) {
              $(this).css('left',50*i);
         }).appendTo('.body');
     });
});

Это новая скрипка

Поделиться
0

position:absolute изменения position:absolute position:relative и $('thumb').css('left', 40*i) до $(this).css('left',40*i);

Изменения в JavaScript не нужны, но они, как вы делаете, являются излишними. Изменения в CSS получат ваш интервал. Когда вы используете position:absolute, все они расположены друг над другом.

Поделиться
  • 0
    Мне нужно позиционирование, чтобы быть абсолютным. Мне это нужно, чтобы после того, как я собрал их все рядом, я бы хотел, чтобы тот, на который нажали, увеличился, а все слева исчезли слева, а все справа - вправо. Абсолютное позиционирование необходимо, чтобы я мог это контролировать.

Ещё вопросы

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