I attempted all day to rearrange this menu the way I want, but since I am new to jQuery, I'm facing some challenges. Here is what I am currently trying to achieve:
Inside the last td.top of this menu, there are 3 ul.sub li items. I aim to extract each one of them along with their content and place it inside a td.top.
Within the content, there is a div and a link. My goal is to interchange their positions so that the link comes before the div, similar to the other td.top elements.
In essence, my objective is to make the 3 ul.sub li identical in terms of structure and classes as the rest of the td.top elements.
Can anyone guide me on how to accomplish this task?
So far, here is the code that I have used:
$("ul.sub a.more_top_element").removeClass('button more_top_element').addClass("top_link").removeAttr('style').removeAttr('value');
$("ul.sub div").removeClass('more_sub').addClass("sub");
At this point, I need the code to extract the content from the 3 ul.sub li elements, swap the link with the div, and wrap it within a td.top element.
Below is the HTML snippet that requires modification using jQuery:
<table class="topMenu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="top">
<a href="http://localhost/d7t/m/photos/home/" class="top_link"><span class="down bx-def-padding-sec-leftright">Photos</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<div class="sub">
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<ul class="sub main_elements">
<li>
<a href="http://localhost/d7t/m/photos/home/" target="_self" class="button more_ntop_element">Home</a>
</li>
...
// Additional code remains unchanged for brevity
...
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
// Additional code blocks remain the same
</tr>
</tbody>
</table>