October 18, 2012
Using appendTo() on the parent `ul` of $this (current) element
Question by uriah
I’m having difficulty with some syntax.
JS
function sortAlpha(a,b){
return a.innerHTML > b.innerHTML ? 1 : -1;
};
$('.brick ul li').each(function() {
$(this).sort(sortAlpha).appendTo('ul');
});
HTML
<div id="studio" class="brick">
<div class="listlist">
<h3 class="title">Studio</h3>
<ul class="list">
<li class="odd">
<a href="#">
<span class="title">Apple</span>
</a>
</li>
<li class="even">
<span class="title"><a href="#">Cat</span>
</a>
</li>
<li class="odd">
<span class="title">
<a href="#">Bar</span>
</a>
</li>
</ul>
</div>
</div>
I would like to append $this li to it’s own parent ul not all the lists
Edit: Just to make sure I’m selecting the correct li and parent. Thanks
Answer by Sheikh Heera
You have inaccurate html, not properly nested, anyways, you may try this, I’ve answered assuming that the first li have the right nesting, as given below
<li class="odd">
<a href="#">
<span class="title">Apple</span>
</a>
</li>
// Sorter
function sorter(){
var arr=[], len=$('.brick').find('ul.list li').length;
$('.brick ul.list li').each(function(i) {
var el=$(this).find('a span').text();
arr.push(el);
if(i==(len-1))
{
arr=sortAlpha(arr);
var ul=$(this).closest('ul.list').empty();
$.each(arr, function(k, v){
var cls=(k%2) ? 'even':'odd',
li=$('<li/>', {'class':cls}),
a=$('<a/>',{'href':'#'}).append($('<span/>', {'class':'title'}).text(v));
ul.append(li.append(a));
});
}
});
}
//Sort helper
function sortAlpha(list){
var result = [], map = [];
for (var i=0, length = list.length; i < length; i++) {
map.push({ index: i, value: list[i].toLowerCase() });
}
map.sort(function(a, b) {
return a.value > b.value ? 1 : -1;
});
for (var i=0, length = map.length; i < length; i++) {
result.push(list[map[i].index]);
}
return result;
}
Answer by Starx
If you are unsure of the parent element, then use this
$(this).sort(sortAlpha).appendTo($(this).parent("ul"));
If you are still not sure that parent is going to right above the DOM Tree then use .closest()
$(this).sort(sortAlpha).appendTo($(this).closest("ul"));
But, performance will better if you uniquely identify the ul with an id like
<ul id="meParent">
...
</ul>
Then
$(this).sort(sortAlpha).appendTo("#meParent");
