如何按标签值对元素进行排序（使用本机JavaScript）？

Question

无法解决它...如何按标签值对元素进行排序（使用本机JavaScript）？主要问题是应该检查一些复选框。这是我的HTML：

  <div class="checkboxesArea">
        <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" checked/>
        <label for="checkboxG1" class="css-label radGroup1">OOCSS</label>

        <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" />
        <label for="checkboxG2" class="css-label radGroup1">Pug(Jade)</label>

        <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" />
        <label for="checkboxG3" class="css-label radGroup1">Stylus/LESS/SASS</label>

    </div>

Answer 1

我已经解决了。这是代码

＆＃13;

＆＃13;

    function myFunction() {

    var sort_by_name = function(a, b) {
        a = a.textContent.toLowerCase();
        b = b.textContent.toLowerCase();
        if (a < b) {
            return -1;
        } else if (a > b) {
            return 1;
        } else {
            // a must be equal to b
            return 0;
        }
    }


    var bigList = document.getElementById('checkboxesArea');


    var list = [];
    list = document.getElementsByClassName("singleCheckbox");
    var arr = [].slice.call(list);
    console.log(arr);
    function sortTheHellOutOfIt () {
        arr.sort(sort_by_name);
    };
    sortTheHellOutOfIt ();
    console.log(arr);
    bigList.innerHTML = "";
    console.log(arr[1]);
    function loop () {
        for (i=0; i< arr.length; i++) {
            bigList.append(arr[i]);
        }
    }
    loop();
    /* bigList.html(arr); */


}
myFunction();

＆＃13;

input[type=checkbox].css-checkbox {
    position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
    padding-left: 25px;
    height: 30px;
    display: inline-block;
    line-height: 40px;
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
    font-family: calibri;
    font-weight: bold;

}

input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png);
    background-position: 0 -30px;
}
label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

＆＃13;

        <div id="checkboxesArea" class="checkboxesArea">

            <div class="singleCheckbox">
                <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" />
                <label for="checkboxG1" class="css-label radGroup1">БЭМ/OOCSS</label>
            </div>
            <div class="singleCheckbox">
                <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" />
                <label for="checkboxG2" class="css-label radGroup1">Pug(Jade)</label>
            </div>
            <div class="singleCheckbox">
                <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" />
                <label for="checkboxG3" class="css-label radGroup1">Stylus/LESS/SASS</label>
            </div>
     </div>

＆＃13;

＆＃13;

＆＃13;