Question

例如：

＆＃13;

#outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0
}

#one {
  left: 0
}

#two {
  left: 200px;
}

#three {
  left: 400px;
}

＆＃13;

<div id="outer">
  <div id="one" class="inner">first</div>
  <div id="two" class="inner">second</div>
  <div id="three" class="inner">third</div>
</div>

＆＃13;

我想做$(#outer).css('left','-200px')这样的事情并让所有三个孩子向左移动200px（这样#one在屏幕外，而#two是#one所在的位置）。

Answer 1

嗯，这很简单：

$('#outer .inner').css('left', '-=200px');

结帐fiddle（我只移动div 20px以显示它的作用）

在jQuery中选择元素与使用css选择元素几乎相同（不完全相同，但为了简洁起见，它是;））。与css完全一样，选择器.inner选择带有类inner的所有元素。调用.css()函数将执行每个所选元素的功能。无需拨打.each()或类似的内容。

Answer 2

这只有css：

#outer
{ 
    position: relative;
    margin-left: -200px;
}

http://jsfiddle.net/fdkrfagk/3/

Answer 3

试试这个：

$(".inner").each(function(){
    var elem = $(this);
    var before = parseInt(elem.css('left'), 10);
    elem.css('left', (before - 200) + 'px');
});

此函数迭代所有子元素，并在每个子元素上调用内部函数。

然后

elem代表每个孩子。 before存储css-left属性的先前值。（每个孩子都不一样）

然后将值向左移动200px。

另一个解决方案是使用闭包：

$('.inner').css('left', function (index, leftValue) {
    return parseInt(leftValue, 10) - 200 + 'px';
});

如何同时移动一组定位的孩子？

3 个答案: