wrapAll & sort #1

by toubia95

HTML

<div class="onglet" id="onglet_9" style=""><h1 class="title">Domaines</h1><label for="d_dom" class="full">Domaines Frantext</label><input type="text" id="d_dom" name="d_dom" class="full"><div class="spacer"></div>
<label for="d_natur" class="half">Nature du texte</label><select id="d_natur" name="d_natur" class="half">
<option value=""></option>
<option value="Ouvrage [texte imprimé]">Ouvrage [texte imprimé]</option>
<option value="Presse &amp; périodiques [texte imprimé]">Presse &amp; périodiques [texte imprimé]</option>
<option value="Manuscrit [transcription]">Manuscrit [transcription]</option>
</select>
<label for="d_specif" class="half">Spécificités linguistiques</label><select id="d_specif" name="d_specif" class="half">
<option value=""></option>
<option value="Textes d'auteurs français">Textes d'auteurs français</option>
<option value="Textes d'auteurs francophones">Textes d'auteurs francophones</option>
</select><div class="spacer"></div>
<div class="spacer"></div>
<h1>Domaines</h1>
<div class="wrapper_input"><label for="d_droit" class="check_mini">Droit</label><input type="checkbox" id="d_droit" name="d_droit" value="1" class="check_mini"></div>
<div class="wrapper_input"><label for="d_hist" class="check_mini">Histoire</label><input type="checkbox" id="d_hist" name="d_hist" value="1" class="check_mini"></div>
<div class="wrapper_input"><label for="d_litt" class="check_mini">Littérature</label><input type="checkbox" id="d_litt" name="d_litt" value="1" class="check_mini"></div>
<div class="wrapper_input"><label for="d_med" class="check_mini">Médecine</label><input type="checkbox" id="d_med" name="d_med" value="1" class="check_mini"></div>
<div class="wrapper_input"><label for="d_philo" class="check_mini">Philosophie, épistémologie</label><input type="checkbox" id="d_philo" name="d_philo" value="1" class="check_mini"></div><div class="spacer"></div>
<div class="wrapper_input"><label for="d_pol" class="check_mini">Politique</label><input type="checkbox"...

CSS

.wrapper_input {
  position: relative;
    clear:both;
}
form input, form textarea, form select {
    margin-bottom: 10px;
}
input.check_mini, input.check_minibr {
    width: auto;
    margin-top: 0;
    margin-right: 0;
}
form label.check_mini, form label.check_minibr {
    width: auto;
}

input.check_minibr {
  margin-bottom: 10px;
}

form label {
    width: auto;
    padding-top: 2px;
}

.wrapper_input > label {
  position: absolute;
  left: 20px;
}

JavaScript

$('div.spacer').remove();
$(':not(.wrapper_input) + .wrapper_input, * > .wrapper_input:first-of-type').
     each(function() {
       $(this).
           nextUntil(':not(.wrapper_input)').
           addBack().
           wrapAll('<div class="wrapper_group_input" />');
     });
$( ".wrapper_input .check_minibr" ).removeClass( "check_minibr" ).addClass( "check_mini" );
$( ".wrapper_group_input:contains('Roman')" ).addClass("sortLabels");

/* https://stackoverflow.com/questions/32090141/jquery-javascript-sort-parent-divs-based-on-a-number-in-child-divs */
var cont = $(".sortLabels");
var arr = $.makeArray(cont.children(".wrapper_input"));
console.log(arr);