Question

这是我的HTML：

 function createTable(){
      var table = document.getElementById("wData"); /*  */
      var days = ['M', 'T', 'W', 'Th', 'Fr', 'Sa', 'Sun', 'M', 'T', 'w']; 
      var windS = [6,7,4,4,5,1,8,9,10,11]  /*speed of wind */
      var average = [10,12,5,6,7,5,10,8,9,10]; /* average wind*/
      var max = [8,12,13,20,9,15,15,31,18,20];  /* maximum tempreture*/
      var wd = [200,210,250,201,301, 209,159,317,218,202];  /* wind direction*/
      for(i = 0 ; i < 10;  ++i){
       var row = table.insertRow(i); 
        var cell1 = row.insertCell(0);
        cell1.id = 'cell' + 0; 
        cell1.style.border = '1px solid black';
        var cell2 = row.insertCell(1);
        cell2.id = 'cell' + 1; 
        cell2.style.border = '1px solid black';
        var cell3 = row.insertCell(2);
        cell3.id = 'cell' + 2; 
        cell3.style.border = '1px solid black';
        var cell4 = row.insertCell(3);
        cell4.id = 'cell' + 3; 
        cell4.style.border = '1px solid black';
        cell4.style.height ='80px'
        cell1.innerHTML  = days[i]; 
        cell2.innerHTML  = max[i]; 
        cell3.innerHTML  =  average[i]; 
        cell4.innerHTML  = "<div class='animWD'>" + wd[i] + "</div>" + "<br />" + windS[i];  /* i wann animate wd[i] elements*/
      }

  }

 createTable();
 function anim(){ $(".animWD").toggle("slow"); }
 let int =  setInterval(anim, 1000);

我需要创建所有这些标记名称的数组。像这样：

<div class="tags_autoloaderBox">
  <div>
    <div>
      <span>PHP</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>HTML</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>CSS</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>MySQL</span>
      <p>there is some explanations</p>
    </div>
  </div>
</div>

所以我需要解析HTML。是通过JS还是jQuery做到这一点？

Answer 1

这个jquery应该可以用来获取数组：

var array = $(".tags_autoloaderBox span").map(function (){
    return $(this).text();
}).get();

要将其转换为分隔字符串，您可以执行以下操作：

var str = array.join(" | ");

jsFiddle

jQuery map documentation

MDN array join documentation

Answer 2

这是一个直接的JavaScript解决方案，它收集<span>个元素，循环遍历它们并将它们的文本内容放入一个数组中：

// Create an empty array to hold the results:
var results = [];

// Gather all the relevant span elements and loop through them:
document.querySelectorAll(".tags_autoloaderBox span").forEach(function(element){
  // Push each element's text content into the array
  results.push(element.textContent);
});
// Output as needed:
console.log(results.join(" | "));

<div class="tags_autoloaderBox">
  <div>
    <div>
      <span>PHP</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>HTML</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>CSS</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>MySQL</span>
      <p>there is some explanations</p>
    </div>
  </div>
</div>

Answer 3

使用querySelectorAll，您可以选择div中的所有跨距，只需创建一个数组并将这些跨度内容推入其中

检查此代码段

＆＃13;

var div = document.querySelector('.tags_autoloaderBox');
var spans = div.querySelectorAll('span');
var arr = [];
var str="";
spans.forEach(function(span) {
  arr.push(span.innerHTML);
});
console.log(arr);
console.log(arr.join("| "));

＆＃13;

<div class="tags_autoloaderBox">
  <div>
    <div>
      <span>PHP</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>HTML</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>CSS</span>
      <p>there is some explanations</p>
    </div>
  </div>
  <div>
    <div>
      <span>MySQL</span>
      <p>there is some explanations</p>
    </div>
  </div>
</div>

＆＃13;

希望这有帮助

Answer 4

您可以使用Array.from()，对象解构来返回textContent span元素的DOM属性

＆＃13;

let res = Array.from(document.querySelectorAll(".tags_autoloaderBox span"), ({textContent}) => textContent);
console.log(res);

＆＃13;

<div class="tags_autoloaderBox">
    <div><div>
        <span>PHP</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>HTML</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>CSS</span>
        <p>there is some explanations</p>
    </div></div>
    <div><div>
        <span>MySQL</span>
        <p>there is some explanations</p>
    </div></div>
</div>

＆＃13;

Answer 5

好吧，它看起来已经回答了，但我把它写出来并认为我会分享。如果您的浏览器不支持querySelectorAll ...

，这将有效

window.addEventListener('load', function () {
        var arr = getSpanTagsArr;
        // Do whatever you want with the arr here.
    });
    function getSpanTagsArr() {
        var tagHolders = document.getElementsByClassName('tags_autoloaderBox');
        var tags = [];
        for (var i = 0; i < tagHolders.length; i++) {
            var spans = tagHolders[i].getElementsByTagName('span');
            for (var j = 0; j < spans.length; j++) {
                var tag;
                if (spans[i].textContent) {
                    val = spans[j].textContent;
                }
                else if (spans[j].innerText) {
                    val = spans[j].innerText;
                }
                else {
                    val = spans[j].innerHTML;
                }
                if (tags.indexOf(val) == -1) {
                    tags.push(val);
                }
            }
        }
        return tags;
    }

如何制作一些HTML单词？

5 个答案: