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>


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -