Reorganizing DOM elements with javascript

Question

I'm having a heck of a time with this. I'd like to reorganize these <span> elements within each <td class="ref_type_block">, sorting by the attribute sort_order.

<tr>
    <td class="time_col">11am</td>
    <td class="ref_type_block">
        <span class="ref_type_1" sort_order="0">█</span>
        <span class="ref_type_2" sort_order="1">█</span>
        <span class="ref_type_3" sort_order="3">█</span>
        <span class="ref_type_13" sort_order="2">█</span>
    </td>
</tr>
<tr>
    <td class="time_col">12pm</td>
    <td class="ref_type_block">
        <span class="ref_type_1" sort_order="0">█</span>
        <span class="ref_type_2" sort_order="1">█</span>
        <span class="ref_type_3" sort_order="3">█</span>
        <span class="ref_type_13" sort_order="2">█</span>
        <span class="ref_type_13" sort_order="2">█</span>
        <span class="ref_type_13" sort_order="2">█</span>
    </td>
</tr>

I have the following javascript function which feels very close, I can log things to console showing me it's selecting the right parts, and .sort() is firing, but it's not rewriting to the <td> element.

function sortBlocks() {

    var tds = $('.ref_type_block');
    for (var i = tds.length - 1; i >= 0; i--) {
        td = tds[i]
        console.log( $(td).find('span').length );
        if ($(td).find('span').length > 0) {
            console.log("firing on:",td);
            $(td).find('span').sort(function (a, b) {            
                return +a.dataset.sort_order - +b.dataset.sort_order;
            }).appendTo( $(td) );
        }
    };
}

I've been away from javascript / jquery for a bit, afraid it's something terribly simple, particularly around the .appendTo() method. Any help would be appreciated.

The difference here may be that you need the attribute to be `data-sort_order` to access it through `dataset` — Jason P, Aug 22 '16 at 19:00
@jason-p, You're right. It was the shame of posting what I knew in my heart to be similar that I stumbled on the answer moments later. For reasons I am not clear about, I was unable to use `a.dataset.sort_order`, I had to use `a.getAttribute('sort_order')` — ghukill, Aug 22 '16 at 19:01
Annnnd then I saw your comment, you're exactly right, that was it. Appreciate the stellar attention to detail. — ghukill, Aug 22 '16 at 19:01
Glad I could help. I would recommend using a `data-*` attribute if possible, since using "custom" attributes breaks validation. http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag — Jason P, Aug 22 '16 at 19:04

score 2 · Answer 1 · answered Aug 22 '16 at 19:01

Try This

$('table').find('.ref_type_block').each(function(i,k){
    $(k).find('span').sort(function (a, b) {
        var first =parseInt( $(a).attr('sort_order'));
        var second =parseInt( $(b).attr('sort_order'));
        return (first < second) ? -1 : (first > second) ? 1 : 0;
    }).appendTo($(k));
});

or

$('table').find('.ref_type_block').each(function(i,k){
        $(k).find('span').sort(function (a, b) {
            return ($(b).attr('sort_order')) < ($(a).attr('sort_order')) ? 1 : -1;
        }).appendTo($(k));
    });

In the future, it's best to include information as to how/why the code in this post answers the question. This will help future readers. See also [answer]. — Heretic Monkey, Aug 22 '16 at 19:13

Reorganizing DOM elements with javascript

1 Answers1