jquery - Replace main menu's first and second items A element with SPAN -

my solution below working:

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

it replaces <a> <span> replaces submenus elements also. don't want that. here's example jsfiddle

you need add > before <a> using way #main-menu > ul > li:nth-child(1) a means <a> in <li>. adding > restrict 2 first child only.

$('#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>