Question

有一个父母和8个孩子的代码，我想要孩子们的课程＆＃34; b＆＃34;在孩子们的班级＆＃34; a＆＃34;。有一个带有parentElement类和8个孩子的代码，我想要孩子类＆＃34; secondElement＆＃34;在孩子们的班级＆＃34; firstElement＆＃34;。有JS代码可以解决它，但有一个bug，因为元素以随机方式相互附加。代码：

<div class="parentElement">

<a class="firstElement">
</a>
<div class="secondElement">
</div>

<a class="firstElement">
</a>
<div class="secondElement">
</div>

<a class="firstElement">
</a>
<div class="secondElement">
</div>

<a class="firstElement">
</a>
<div class="secondElement">
</div>

</div>

JS工作之后：

<div class="parentElement">

<a class="firstElement">
   <div class="secondElement">
   </div>
</a>

<a class="firstElement">
   <div class="secondElement">
   </div>
</a>

<a class="firstElement">
   <div class="secondElement">
   </div>
</a>

<a class="firstElement">
   <div class="secondElement">
   </div>
</a>

</div>

以下是我的代码实现的代码段。

＆＃13;

function getElement() {
        var parent = document.getElementsByClassName('parentElement')
        for(var i = 0; i < parent.length; i++)		
	    	var parentLength = parent[i];

			var firstElements =  parentLength.getElementsByClassName('firstElement'),
	            firstElementsLength = firstElements.length,
				secondElements =  parentLength.getElementsByClassName('secondElement');
	        
	        while(firstElementsLength--) {
	            var secondElementsLength = secondElements.length;
	            while(secondElementsLength--) {
		firstElements[firstElementsLength].appendChild(secondElements[secondElementsLength]);
	            }
	        }
	}

	getElement();

＆＃13;

<div class="parentElement">

    <a class="firstElement">
      firstElement1
    </a>
    <div class="secondElement">
      secondElement2
    </div>

    <a class="firstElement">
      firstElement1
    </a>
    <div class="secondElement">
      secondElement2
    </div>
      
    <a class="firstElement">
      firstElement1
    </a>
    <div class="secondElement">
      secondElement2
    </div>

    <a class="firstElement">
      firstElement1
    </a>
    <div class="secondElement">
      secondElement2
    </div>

    </div>

＆＃13;

Answer 1

可能有一种更简单的方法来查看它，但是这里有一些更改可以将div添加到锚标签。

function getElement() {
  var parent = document.getElementById("parentElement"), 
    firstElements = parent.getElementsByClassName('firstElement'),
	secondElements =  parent.getElementsByClassName('secondElement'),
	elementsLength = firstElements.length;

  while(elementsLength--) {
    firstElements[elementsLength].appendChild(secondElements[elementsLength]);
  }
    
  output.value = parent.innerHTML;
}

getElement();

textarea {
    border: 1px solid #000;
    height: 100px;
}

<div id="parentElement">
    <a class="firstElement">
    </a>
    <div class="secondElement">
    </div>

    <a class="firstElement">
    </a>
    <div class="secondElement">
    </div>
      
    <a class="firstElement">
    </a>
    <div class="secondElement">
    </div>

    <a class="firstElement">
    </a>
    <div class="secondElement">
    </div>

    <textarea id="output"></textarea>
</div>

假设您具有firstElement和secondElement类的相同数量的元素，这将获得具有firstElement类的所有标记的数组， secondElement类，以及有多少个。然后我们遍历每一个（再次，假设我们有相同数量的每个和他们以这种方式格式化，一个接一个）并将div添加到{{ 1}}。

另一个说明。由于此处只有1个父元素，因此您可以使用anchor代替id。这样我们就可以通过id获取元素而不是按类名获取元素数组。

Here's the fiddle我正在寻找修改。请注意，class仅用于在调用函数后显示HTML。

改变父母 - ＆gt;孩子对孩子的javascript

1 个答案: