[jQuery] .load contents of HTML fragment problem TD > LI
Ok here is a stumper I am trying to load the td contents from one page
into an ordered list on another page
I have a page called inc_menu.html with the following code
<body>
<table>
<tr>
<td class="menuItems">menu 1</td>
</tr>
<tr>
<td class="menuItems">menu 2</td>
</tr>
</table>
</body>
then I have a page called loadMenu.html that looks like this
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu li').load('inc_menu.html table tr td');
});
</script>
</head>
<body>
<ul id="menu">
<li class="menuItems"></li>
</ul>
</body>
I am getting there however the entire contents of all the TD
(including the actual TD tags are being inserted into one LI when the
code runs
Here is the generated code
<ul id="menu">
<li class="menuItems">
<td class="menuItems">menu 1</td>
<td class="menuItems">menu 2</td>
</li>
</ul>
I am trying to create a new LI for each corresponding TD from the the
inc_menu.html page fragment
The generated code should look like this
<ul id="menu">
<li class="menuItems">menu 1</li>
<li class="menuItems">menu 2</li>
</ul>
Obviously I need to do some sort of looping or something however that
is beyond my current jquery comprehension
Perhaps somebody knows how to do this already or can point me in the
right direction?
Any help would greatly be appreciated