Pode fazer um .each()
percorrendo as div
s verificando o valor em data-position
de cada elemento.
Quando encontrar um valor maior do que o data-position
da div
a ser inserida, o loop é cancelado com return false;
e o valor do índice do elemento vindo de (e)
é atribuído à variável idx
.
No if
após o loop você usa .before()
para inserir a div
antes do elemento de classe .child
cujo índice está em idx
.
Caso o loop não tiver encontrado um elemento com data-position
maior, significa que todas possuem valor em data-position
menor, logo o valor de idx
continuará indefinido e a div
será inserida no final com .append()
:
function add(div){
var pos = $(div).data('position'); // pega o valor do data-position
var idx;
$("#mainDiv .child").each(function(e){
if($(this).data('position') > pos){
idx = e; // idx pega o valor do índice encontrado
return false; // aborta o loop
}
});
if(idx >= 0){
// O ":eq()" seleciona o elemento pelo índice (base zero)
// No caso, a div com o valor data-position "6" é de índice 1
$("#mainDiv .child:eq("+idx+")").before(div);
}else{
$("#mainDiv").append(div);
}
}
// chama a função passando a div a ser inserida
add('<div class="child" data-position="5">5</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div class="child" data-position="2">2</div>
<div class="child" data-position="6">6</div>
<div class="child" data-position="7">7</div>
<div class="child" data-position="9">9</div>
</div>
Há variadas formas de inserir a div
. Você pode, por exemplo, enviar para a função apenas o número do data-position
e montar a div
dentro da função, entre outras.