javascript - 使用 jQuery 更改元素的 margin-right 值

Question

我创建了一个简单的 <ul>在 HTML 中列出并为每个 <li>'s 分配不同的 margin-right 值使用 CSS ( jsFiddle )。这是它的 HTML 标记:

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul> 

CSS:

ul {
    padding: 0px;
    margin: 0px;
}

ul li {
     display: inline-block;
}

ul li:first-child {
    margin-right: 10px;
}

ul li:nth-child(2) {
    margin-right: 20px;
}

ul li:nth-child(3) {
    margin-right: 30px;
}

ul li:nth-child(4) {
    margin-right: 40px;
}

ul li:last-child {
    margin-right: 50px;
}

我心中的问题是，是否可以替换第一个 child 的 margin-right 值 <li>与二胎的关系<li>利用以下 jQuery 片段:

jQuery('ul li:first-child').css('margin-right', '');

例如第一个 child <li>具有 10px 的 margin-right 值和第二个 child <li>具有 20px 的 margin-right 值因此 jQuery 应该替换 first-child <li> 的 margin-right 值到 20 像素。

Answer 1

你大部分时间都在那里，你只是从来没有问过第二个 child 它的 margin-right 是什么:

jQuery('ul li:first-child').css('margin-right', jQuery('ul li:first-child').next().css('margin-right'));

或更有效(更清晰):

var first = jQuery('ul li:first-child');
first.css('margin-right', first.next().css('margin-right'));

或者更清楚:

var first = jQuery('ul li:first-child');
var marginRight = first.next().css('margin-right');
first.css('margin-right', marginRight);

Updated Fiddle - 请注意，我必须在 fiddle 中更改的一件事是您选择了“No wrap - in head”选项，这意味着 JavaScript 代码在元素存在之前运行。我将其更改为“No wrap - in body”，因此脚本位于主体的末尾，因此所有元素都存在。