Question

我的解决方案几乎正常运作：

$('#main-menu > ul > li:nth-child(1) a, #main-menu > ul > li:nth-child(2) a').replaceWith(function() {
    return '<span>' + $(this).text() + '</span>'
});

它用<a>替换<span>，但它也替换了子菜单元素。我不希望这样。这是一个例子jsfiddle

Answer 1

您需要在>之前添加<a>，因为#main-menu > ul > li:nth-child(1) a表示<a>中的所有<li>。添加>会将其限制为仅限两个第一个孩子。

＆＃13;

$('#main-menu > ul > li:nth-child(1) > a,#main-menu > ul > li:nth-child(2) > a').replaceWith(function() {
return '<span>' + $(this).text() + '</span>'
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-menu">
  <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
    <li><a href="#">item5</a></li>
  </ul>
</div>

＆＃13;

Answer 2

或者您可以使用nth-child(-n+2)选择前三个元素，使其更紧凑。

$('#main-menu > ul > li:nth-child(-n+2) > a').replaceWith(function() {
return '<span>' + $(this).text() + '</span>'
});

用SPAN替换主菜单的第一个和第二个项目元素

2 个答案: