Adrian M.
Reputation: 7443
jQuery extract content, switch content inside, wrap it in new tags
I tried all day to re-order this menu like I need but I am new to jquery.. What I am trying to do is:
Inside the last td.top from this menu there are 3 ul.sub li, I want each to be extracted from there and it's content put inside a td.top.
Then inside the content there is a div and a link, I need to switch positions, the link must be before the div (just like inside the other td.top)
Basically I try to make the 3 ul.sub. li identical (add same classes, have same structure etc, like the rest of td.top)
How can I do this? I appreciate any tips..
This is the code I used so far:
$("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");
.. here I should have the code to extract the content inside the 3 ul.sub li and switch the link with the div, then wrap it in a td.top..
This is the html I need to modify with 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>
<li>
<a href="http://localhost/d7t/m/photos/albums/browse/all" target="_self" class="button more_ntop_element">Albums</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/browse/all" target="_self" class="button more_ntop_element">Recent</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/browse/top" target="_self" class="button more_ntop_element">Top</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/tags" target="_self" class="button more_ntop_element">Tags</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/categories" target="_self" class="button more_ntop_element">Categories</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/rate" target="_self" class="button more_ntop_element">Rater</a>
</li>
<li>
<a href="http://localhost/d7t/m/photos/calendar" target="_self" class="button more_ntop_element">Calendar</a>
</li>
<li>
<a href="http://localhost/d7t/searchKeyword.php?type=bx_photos" target="_self" class="button more_ntop_element">Search</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="http://localhost/d7t/m/poll/&action=poll_home" class="top_link"><span class="down bx-def-padding-sec-leftright">Polls</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/poll/&action=poll_home" target="_self" class="button more_ntop_element">Polls Home</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/" target="_self" class="button more_ntop_element">All Polls</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/&action=popular" target="_self" class="button more_ntop_element">Popular</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/&action=featured" target="_self" class="button more_ntop_element">Featured</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/calendar" target="_self" class="button more_ntop_element">Calendar</a>
</li>
<li>
<a href="http://localhost/d7t/searchKeyword.php?type=poll" target="_self" class="button more_ntop_element">Search</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/tags" target="_self" class="button more_ntop_element">Tags</a>
</li>
<li>
<a href="http://localhost/d7t/m/poll/categories" target="_self" class="button more_ntop_element">Categories</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</td>
<td class="top">
<a href="javascript: void(0);" onclick="void(0);" class="top_link">
<span class="down bx-def-padding-sec-leftright">More</span>
<!--[if gte IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
<div style="position:relative;display:block;">
<ul class="sub">
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
<a href="http://localhost/d7t/m/sites/home/" target="_self" class="button more_ntop_element">Sites Home</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/all" target="_self" class="button more_ntop_element">All Sites</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/admin" target="_self" class="button more_ntop_element">Admin Sites</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/users" target="_self" class="button more_ntop_element">User Sites</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/top" target="_self" class="button more_ntop_element">Top Rated</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/tags" target="_self" class="button more_ntop_element">Tags</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/categories" target="_self" class="button more_ntop_element">Categories</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/calendar" target="_self" class="button more_ntop_element">Calendar</a>
</li>
<li>
<a href="http://localhost/d7t/m/sites/search" target="_self" class="button more_ntop_element">Search</a>
</li>
</ul>
</div>
<a href="http://localhost/d7t/m/sites/home/" class="top_link">Sites</a>
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
<a href="http://localhost/d7t/m/sounds/home/" target="_self" class="button more_ntop_element">Sounds home</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/albums/browse/all" target="_self" class="button more_ntop_element">Sound albums</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/browse/all" target="_self" class="button more_ntop_element">All Sounds</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/browse/top" target="_self" class="button more_ntop_element">Top Sounds</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/browse/popular" target="_self" class="button more_ntop_element">Popular Sounds</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/browse/featured" target="_self" class="button more_ntop_element">Featured Sounds</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/tags" target="_self" class="button more_ntop_element">Tags</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/categories" target="_self" class="button more_ntop_element">Categories</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/rate" target="_self" class="button more_ntop_element">Rater</a>
</li>
<li>
<a href="http://localhost/d7t/m/sounds/calendar" target="_self" class="button more_ntop_element">Calendar</a>
</li>
<li>
<a href="http://localhost/d7t/searchKeyword.php?type=bx_sounds" target="_self" class="button more_ntop_element">Search</a>
</li>
</ul>
</div>
<a href="http://localhost/d7t/m/sounds/home/" class="top_link">Sounds</a>
<div class="clear_both sub">
</div>
</li>
<li class="">
<div class="sub">
<ul class="sub main_elements">
<li>
<a href="http://localhost/d7t/m/store/home/" target="_self" class="button more_ntop_element">Store Home</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/browse/recent" target="_self" class="button more_ntop_element">Recent</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/browse/top" target="_self" class="button more_ntop_element">Top Rated</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/browse/free" target="_self" class="button more_ntop_element">Free</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/tags" target="_self" class="button more_ntop_element">Tags</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/categories" target="_self" class="button more_ntop_element">Categories</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/calendar" target="_self" class="button more_ntop_element">Calendar</a>
</li>
<li>
<a href="http://localhost/d7t/m/store/search" target="_self" class="button more_ntop_element">Search</a>
</li>
</ul>
</div>
<a href="http://localhost/d7t/m/store/home/" class="top_link">Store</a>
<div class="clear_both sub">
</div>
</li>
<li class="li_last_round"> </li>
</ul>
</div>
<div class="clear_both">
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</td>
</tr>
</tbody>
</table>
Upvotes: 0
Views: 86
Answers (1)
sage88
Reputation: 4574
This is kind of a lot of questions, not just one, and probably not particularly well suited for stackoverflow.
You want to select the last td with class top. This should be done using the last-child selector:
$( "table.topMenu td.top:last-child" ) // you won't use this, just showing the hierarchy
Then, from within this td, you want to select each of the divs with class sub.
$( "table.topMenu td.top:last-child div.sub" )
That should select all the content of the div you want. Then you need to select the content of the links in this same section like so:
$( "table.topMenu td.top:last-child a.top_link" )
You should store them into javascript objects, like so:
var divs = $( "table.topMenu td.top:last-child div.sub" ).remove();
var links = $( "table.topMenu td.top:last-child a.top_link" ).remove();
These lines will remove them from the DOM, but save the jQuery objects for later use (Note that since these selectors will get multiple DOM elements they are jQuery objects, not DOM elements at this point). You should then be able to append them as needed with an appropriate selector. You may also want to call:
$( "table.topMenu td.top:last-child" ).remove();
as well to clean up the DOM.
Upvotes: 1
Related Questions
- Wrap part of text into new element tag
- using js/jquery to extract html into two strings (split on a br tag) within occurrences of a wrapping div
- jQuery - Get content between 2 tags and wrap this in new elements
- Javascript / jQuery : Split content in two parts
- jQuery wrapAll contents including text between two tags
- Changing the html content back and forth of an tag using jquery
- Break HTML into parts
- split content with jquery and <hr> tag and put it to another div
- How take html structure beetween tags
- How to replace some content and keep other content in the same wrapper using jQuery...