Reputation: 79
I have this HTML structure:
<ul class="shopp_categories">
<li><a href="#">TEXT</a>
<ul class="children">
<li><a href="#">TEXT</a></li>
</ul>
</li>
<li><a href="#">Text</a></li>
</ul>
And this my JS:
jQuery('.shopp_categories ul.children').parent().append('###');
My function does not append the content correctly. It shall look like:
<ul class="shopp_categories">
<li>->####<-<a href="#">TEXT</a>
<ul class="children">
<li><a href="#">TEXT</a></li>
</ul>
</li>
<li><a href="#">Text</a></li>
</ul>
Without the arrows, of course, after my function was executed. Where is the error in my code?
Upvotes: 1
Views: 2243
Reputation: 54016
try this
$(function(){
$('.shopp_categories li').find('ul').parent().prepend('###');
});
Upvotes: 1
Reputation: 61729
Append will put it at the end. Prepend will put it at the beginning. Try using prepend('###');
instead.
Upvotes: 2
Reputation: 45083
What you have is invalid, to be sure, but why not use an index selector?
$(".shopp_categories li:eq(0)").prepend("###");
This way you can easily alter the index of the item you're intending to change. Simply change the value within parenthesis of eq
, e.g. eq(x)
.
Upvotes: 1
Reputation: 2435
Your javascript is wrong.
Try that:
$(function(){
$('.shopp_categories li:first').prepend('###');
});
Here is a working example: http://jsfiddle.net/UknL3/
Upvotes: 5