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");