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>的边距权限值替换为第二个孩子<li>的值片段：

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

例如，第一个子<li>的边距权限值为10px，第二个子<li>的边距权限值为20px，因此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);

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

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

1 个答案: