3

Gostaria de saber se é possível "pré-definir" a posição de um elemento ao usar um append, por exemplo:

<div id="mainDiv">
   <div class="child" data-position="2"></div>
   <div class="child" data-position="6"></div>
   <div class="child" data-position="7"></div>
   <div class="child" data-position="9"></div>
</div>

Agora depois de uma determinada ação do usuário digamos que eu precise usar o seguinte append:

$("#mainDiv").append('<div class="child" data-position="5"></div>');

Por padrão o elemento será adicionado ao fim do conteúdo atual da div#mainDiv, porém eu gostaria de criar uma função que detecta em qual posição tal elemento deve ser adicionado que no caso seria entre os childs 2 e 6.

1 Resposta 1

1

Pode fazer um .each() percorrendo as divs 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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .