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
Post a Comment