は、SPAN

Question

を持つ要素

をメインメニューの第一及び第二のアイテムを交換して、以下の私のソリューションはほとんど働いている：

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

をそれは<span>で<a>を置き換えますが、それはまた、サブメニュー要素を置き換えます。私はそれを望んでいない。ここでは、このよう#main-menu > ul > li:nth-child(1) aを使用して<li>内のすべての<a>を意味する<a>前>を追加する必要がある例jsfiddle

Answer 1

です。 >を追加すると、2番目の子のみが制限されます。

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

<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>

Answer 2

それとも、最初の3つの要素を選択するために、nth-child(-n+2)を使用してそれがさらにコンパクトにすることができます。

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