jQuery insérer div comme certains index

Question

Dire que j'ai ceci:

<div id="controller">
 <div id="first">1</div>
 <div id="second>2</div>
</div>

mais disons que j'ai voulu insérer une nouvelle div arbitrairement fondés sur un indice, je l'offre.

Dire que j'ai donné l'indice d'insérer de 0, le résultat devrait être:

<div id="controller">
  <div id="new">new</div>
  <div id="first">1</div>
  <div id="second">2</div>
</div>

et si j'ai un indice pour insérer des 2 serait le résultat.

<div id="controller">
  <div id="first">1</div>
  <div id="second">2</div>
  <div id="new">new</div>
</div>

et si je donne un indice de 1, le résultat serait:

<div id="controller">
  <div id="first">1</div>
  <div id="new">new</div>
  <div id="second">2</div>
</div>

juste oublier que le dernier exemple de format. Le simple fait de copier-coller le code HTML sur ce site est horrible assez pour me faire à propos de crier et de tirer mes cheveux et je ne veux pas passer plus de temps à jouer avec elle!

Answer 1

Comme une fonction à un peu mieux de la manipulation de 0:

function insertAtIndex(i) {
    if(i === 0) {
     $("#controller").prepend("<div>okay things</div>");        
     return;
    }


    $("#controller > div:nth-child(" + (i - 1) + ")").after("<div>great things</div>");
}

EDIT: Ajout de parenthèses dans l'nth-child sélecteur pour éviter NaN erreurs. @hofnarwillie

Answer 2

J'ai eu un problème similaire. Malheureusement, aucune des solutions n'a fonctionné pour moi. J'ai donc codé de cette façon:

jQuery.fn.insertAt = function(index, element) {
  var lastIndex = this.children().size()
  if (index < 0) {
    index = Math.max(0, lastIndex + 1 + index)
  }
  this.append(element)
  if (index < lastIndex) {
    this.children().eq(index).before(this.children().last())
  }
  return this;
}

Exemples pour le problème:

$("#controller").insertAt(0, "<div>first insert</div>")
$("#controller").insertAt(-1, "<div>append</div>")
$("#controller").insertAt(1, "<div>insert at second position</div>")

Voici quelques exemples tirés de mon unittests:

$("<ul/>").insertAt(0, "<li>0</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(1, "<li>1</li>")
$("<ul/>").insertAt(-1, "<li>-1</li>")
$("<ul/>").insertAt(-1, "<li>-1</li>").insertAt(0, "<li>0</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(-1, "<li>-1</li>")
$("<ul/>").insertAt(-1, "<li>-1</li>").insertAt(1, "<li>1</li>")
$("<ul/>").insertAt(-1, "<li>-1</li>").insertAt(99, "<li>99</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(2, "<li>2</li>").insertAt(1, "<li>1</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(1, "<li>1</li>").insertAt(-1, "<li>-1</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(1, "<li>1</li>").insertAt(-2, "<li>-2</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(1, "<li>1</li>").insertAt(-3, "<li>-3</li>")
$("<ul/>").insertAt(0, "<li>0</li>").insertAt(1, "<li>1</li>").insertAt(-99, "<li>-99</li>")

Edit: Il gère tous les négatifs indizes normalement maintenant.

Answer 3

J'ai trouvé la liste des solutions ne fonctionnent pas ou ont été trop compliqué. Tout ce que vous avez à faire est de déterminer la direction que vous êtes ajoutant de. Voici quelque chose de simple écrit dans une OOP manière pour jQuery.

$.fn.insertIndex = function (i) {
    // The element we want to swap with
    var $target = this.parent().children().eq(i);

    // Determine the direction of the appended index so we know what side to place it on
    if (this.index() > i) {
        $target.before(this);
    } else {
        $target.after(this);
    }

    return this;
};

Vous pouvez tout simplement utiliser le ci-dessus avec quelques syntaxe simple.

$('#myListItem').insertIndex(2);

Actuellement, l'utilisation de ce sur un éditeur visuel du projet de déménagement des tonnes de données par glisser-déposer. Tout fonctionne très bien.

---

Edit: j'ai ajouté un live interactive CodePen de démonstration où vous pouvez jouer avec la solution ci-dessus http://codepen.io/ashblue/full/ktwbe

Answer 4

Utiliser mon plugin simple d' Append With Index :

$.fn.appendToWithIndex=function(to,index){
        if(! to instanceof jQuery){
            to=$(to);
        };
        if(index===0){
            $(this).prependTo(to)
        }else{
            $(this).insertAfter(to.children().eq(index-1));
        }
    };*

Maintenant :

$('<li>fgdf</li>').appendToWithIndex($('ul'),4)

Ou :

$('<li>fgdf</li>').appendToWithIndex('ul',0)

Answer 5

//jQuery plugin insertAtIndex included at bottom of post   

//usage:
$('#controller').insertAtIndex(index,'<div id="new">new</div>');

//original:
<div id="controller">
  <div id="first">1</div>
  <div id="second>2</div>
</div>

//example: use 0 or -int          
$('#controller').insertAtIndex(0,'<div id="new">new</div>');
  <div id="controller">
    <div id="new">new</div>
    <div id="first">1</div>
    <div id="second>2</div>
  </div>

//example: insert at any index     
$('#controller').insertAtIndex(1,'<div id="new">new</div>');
     <div id="controller">
        <div id="first">1</div>
        <div id="new">new</div>
        <div id="second>2</div>
     </div>

//example: handles out of range index by appending        
$('#controller').insertAtIndex(2,'<div id="new">new</div>');
      <div id="controller">
          <div id="first">1</div>
          <div id="second>2</div>
          <div id="new">new</div>
      </div>

/**!
 * jQuery insertAtIndex
 * project-site: https://github.com/oberlinkwebdev/jQuery.insertAtIndex
 * @author: Jesse Oberlin
 * @version 1.0
 * Copyright 2012, Jesse Oberlin
 * Dual licensed under the MIT or GPL Version 2 licenses.
*/

(function ($) { 
$.fn.insertAtIndex = function(index,selector){
    var opts = $.extend({
        index: 0,
        selector: '<div/>'
    }, {index: index, selector: selector});
    return this.each(function() {
        var p = $(this);  
        var i = ($.isNumeric(opts.index) ? parseInt(opts.index) : 0);
        if(i <= 0)
            p.prepend(opts.selector);
        else if( i > p.children().length-1 )
            p.append(opts.selector);
        else
            p.children().eq(i).before(opts.selector);       
    });
};  
})( jQuery );