javascript - 获取 Div 中子元素的值并将其放入列表或新 div 中

Question

我试图在满足条件时获取 div 的所有子元素的值，然后将它们放入新 Div 中的列表中。

父子元素的结构如下:

 <div id="measurements">
    <h3> FACIAL BIO</h3>
    <ul>
                      <div class="wrapperBar">
        <h4> Distance between Eyes: </h4>
        <div class="valueBar" id="distanceBetweenEyes"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Distance between Ears: </h4>
        <div class="valueBar"  id="distanceBetweenEars"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Nose Width: </h4>
        <div class="valueBar"  id="noseWidth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Nose Length: </h4>
        <div class="valueBar"  id="noseLength"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Mouth Width: </h4>
        <div  class="valueBar" id="mouthWidth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Distance between Chin and Mouth: </h4>
        <div  class="valueBar" id="chinToMouth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Eye Width: </h4>
        <div class="valueBar"  id="eyeWidth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Distance between Nose and Mouth: </h4>
        <div class="valueBar"  id="noseToMouth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Mouth Height: </h4>
        <div class="valueBar"  id="topLipToBottomLip"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Nostril Width: </h4>
        <div class="valueBar"  id="nostrilWidth"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Eyebrow Length: </h4>
        <div  class="valueBar" id="eyebrowLength"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Distance Between Eyebrows: </h4>
        <div  class="valueBar" id="distanceBetweenEyebrows"> </div>
      </div>
                      <div class="wrapperBar">
        <h4> Emotion: </h4>
        <div class="valueBar"  id="emotion"> </div>
      </div>

我想要的是每个作为 h4 元素的标题及其下面的相应元素放入一个新的 div 中，只要满足条件，我就会创建该新 div。

示例:

<div id="wrapper">

<ul>
<li> Distance Between Eyes: VALUE_HERE </li> 
<li> Distance Between Ears: VALUE_HERE </li> 
<li> Nose Width: VALUE_HERE </li> 
</ul>
</div>

Answer 1

你使用 jQuery 吗？如果是这样:

$('#measurements h4').each(function() {
    $('#wrapper ul').append('<li>' + $(this).text() + $(this).next().text() + '</li>');
});

在纯 JavaScript 中，没有 jQuery:

var h4s = document.querySelectorAll('h4');
var ul = document.querySelector('#wrapper ul');
var h4, val, thisText, valText, finalText, newLi;
for (var i=0; i>h4s.length; i++) {
    h4 = h4s[i];
    val = h4.nextSibling;
    thisText = h4.innerText || h4.textContent;
    valText = val.innerText || val.textContent;
    finalText = thisText + ': ' + valText;
    newLi = document.createElement('li');
    newLi.hasOwnProperty('innerText') && (newLi.innerText = finalText) || (newLi.textContent = finalText);
    ul.appendChild(newLi);
}

我还没有测试过，但应该可以。您可以调试它。