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

Question

我用HTML創建了一個簡單的<ul>列表，並使用CSS（ jsFiddle ）為每個<li>'s分配了不同的margin-right值。 這是它的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;
}

我想到的問題是，可以使用以下jQuery代碼片段將第一個孩子<li>的margin-right值替換為第二個孩子<li>的margin-right值：

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

例如，第一子<li>具有10px的的余量右值和第二胎<li>具有20像素的余量右值因此jQuery的應更換第一子的邊緣右值<li>到20px。

Answer 1

您幾乎就在那兒，您從未問過第二個孩子，其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);

更新的提琴-請注意，我必須在提琴中更改的一件事是，您選擇了“ No wrap-in head”選項，這意味着JavaScript代碼在元素存在之前運行。 我將其更改為“ No wrap-in body”，因此腳本位於正文的末尾，因此所有元素都存在。