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

我没有测试过，但应该可以使用。你可以调试它。

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

1 个答案: