如何在行尾添加新的子DIV？

Question

点击子DIV，找到孩子被点击的哪一行，并在该行的末尾添加新的子DIV。

我尝试尽可能多地做，但截至目前，我只能将新的孩子添加到第一行。以下是代码段：

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>

这是jsfiddle。只需要纯粹的Javascript解决方案。提前谢谢。

Answer 1

试试这段代码：

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]);
}

Answer 2

你可以试试这个片段吗？

＆＃13;

＆＃13;

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])
  }
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我添加了两个代码段。您可以使用任何服务于您目的的人。

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>

如果这是你想要的，我就是这样做的。每个新div都附加在父div的最后一个。为了显示差异，我使用点击元素的innerHTML作为新子元素的html

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>