En cliquant sur le DIV enfant, recherchez la ligne sur laquelle l'enfant a cliqué et ajoutez un nouveau DIV enfant à la fin de la ligne.

J'ai essayé d'en faire autant que je le pouvais, mais à partir de maintenant, je ne peux ajouter un nouvel enfant qu'au premier rang. Voici l'extrait de code:

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child');
var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;

for (var i = 0; i < x; i++) {
  divs[i].addEventListener('click', function(event) {
    // console.log(event.target.offsetTop)
    // console.log(event.target)
    var newChild = document.querySelector('.new-child');
    if (newChild) {
      newChild.parentElement.removeChild(newChild);
    }
    setTimeout(function() {
      addChildToEndOfRow()
    }, 200);
  }, false);
}

function addChildToEndOfRow() {
  for (var i = 0; i < x; i++) {
    if (divs[0].offsetTop !== divs[i].offsetTop) {

      var newDiv = document.createElement('div')
      newDiv.innerHTML = "boom";
      newDiv.classList.add("new-child");
      pNode.insertBefore(newDiv, divs[i])

      number_of_elements_in_first_row = i;
      break;
    }
  }
}
.parent {
  width: 380px;
}

.parent .child {
  display: inline-block;
  margin-right: 2px;
  background-color: gray;
  margin-bottom: 20px;
  padding: 0 10px
}

.parent .new-child {
  background-color: rgba(0, 0, 0, .2);
  margin-bottom: 20px;
}
<div class="parent">
  <div class="child">1234</div>
  <div class="child">12341234 </div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
</div>

Et voici le jsfiddle. Besoin uniquement d'une solution Javascript pure. Merci d'avance.

0
Syed 12 avril 2018 à 13:41

3 réponses

Meilleure réponse

Essayez ce code:

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child'); //or 

var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;

for (var i = 0; i < x; i++) {
  divs[i].addEventListener('click', function(event) {
    var newChild = document.querySelector('.new-child');
    if (newChild) {
      newChild.parentElement.removeChild(newChild);
    }
    setTimeout(function() {
        addChildToEndOfRow(event.target.offsetTop);
    }, 200);
  }, false);
}

function addChildToEndOfRow(offsetTop) {
  var newDiv = document.createElement('div')
  newDiv.innerHTML = "boom";
  newDiv.classList.add("new-child");
  var addAfterOffsetTop;
  for (var i = 0; i < x; i++) {
    if (addAfterOffsetTop && divs[i].offsetTop > addAfterOffsetTop) {
      pNode.insertBefore(newDiv, divs[i]);
      return;
    }
    if (offsetTop === divs[i].offsetTop) {
      addAfterOffsetTop = divs[i].offsetTop;
    }
  }

  pNode.appendChild(newDiv, divs[divs.length-1]);
}
2
Benjamin Bur 12 avril 2018 à 12:34

Pouvez-vous essayer cet extrait s'il vous plaît?

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child'); //or 

var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;

for (var i = 0; i < x; i++) {
  divs[i].addEventListener('click', function(event) {
    // console.log(event.target.offsetTop)
    // console.log(event.target)
    var newChild = document.querySelector('.new-child');
    if (newChild) {
      newChild.parentElement.removeChild(newChild);
    }
    setTimeout(function() {
      addChildToEndOfRow(event.target)
    }, 200);
  }, false);
}

function addChildToEndOfRow(elem) {
			var newDiv = document.createElement('div')
      newDiv.innerHTML = "boom";
      newDiv.classList.add("new-child");
	console.log(elem);
  for (var i = 0; i < x; i++) {
    if (elem.offsetTop < divs[i].offsetTop) {
      
      pNode.insertBefore(newDiv, divs[i])

      number_of_elements_in_first_row = i;
      break;
    }
    
 	pNode.insertBefore(newDiv, divs[divs.Length - 1])
  }
}
.parent {
  width: 380px;
}

.parent .child {
  display: inline-block;
  margin-right: 2px;
  background-color: gray;
  margin-bottom: 20px;
  padding: 0 10px
}

.parent .new-child {
  background-color: rgba(0, 0, 0, .2);
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">1234</div>
  <div class="child">12341234 </div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
</div>
1
ReadyFreddy 12 avril 2018 à 12:35

J'ai ajouté deux extraits. Vous pouvez utiliser n'importe qui qui sert votre objectif.

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child');
var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;
var s = 0;
for (var i = 0; i < x; i++) {
    divs[i].addEventListener('click', execFunc, false);
}

function execFunc(eve){
      var newDiv = document.createElement('div')
      newDiv.innerHTML = eve.target.innerHTML;
      newDiv.classList.add("new-child");
      eve.target.appendChild(newDiv)
}
.parent {
  width: 380px;
}

.parent .child {
  display: inline-block;
  margin-right: 2px;
  background-color: gray;
  margin-bottom: 20px;
  padding: 0 10px
}

.parent .new-child {
  background-color: rgba(0, 0, 0, .2);
  margin-bottom: 20px;
}
<div class="parent">
  <div class="child">1234</div>
  <div class="child">12341234 </div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
</div>

Si c'est ce que vous voulez, je l'aurais fait de cette façon. Chaque nouveau div est ajouté au dernier du div parent. Pour montrer une différence, j'utilise le innerHTML de l'élément cliqué comme html du nouvel élément enfant

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child');
var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;
var s = 0;
for (var i = 0; i < x; i++) {
    divs[i].addEventListener('click', execFunc, false);
}

function execFunc(eve){
      var newDiv = document.createElement('div')
      newDiv.innerHTML = eve.target.innerHTML;
      newDiv.classList.add("new-child");
   pNode.appendChild(newDiv)
}
.parent {
  width: 380px;
}

.parent .child {
  display: inline-block;
  margin-right: 2px;
  background-color: gray;
  margin-bottom: 20px;
  padding: 0 10px
}

.parent .new-child {
  background-color: rgba(0, 0, 0, .2);
  margin-bottom: 20px;
}
<div class="parent">
  <div class="child">1234</div>
  <div class="child">12341234 </div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
  <div class="child">1234</div>
  <div class="child">12341234</div>
  <div class="child">123412341234</div>
</div>
0
George Bailey 12 avril 2018 à 11:13