如何使用jquery获取json所有标记的类名

Question

我有一个JSON数据，我想列出div内部和内部div和标记中类名的所有属性。

示例JSON数据：

[
  {
    "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n<a class=\"icons-darkbg-slogan main-header__slogan\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/\" data-event_title=\"Header Home::Slogan\" href=\"/\" target=\"_self\" title=\"DWS Homepage\"><img src=\"/globalassets/images/logos/dws_logo_global.svg\" class=\"icon-svg hide-for-print\" alt=\"dws_logo_global\"></a>\n\t\t</div>\n\n\t\t<div class=\"space-9 hide-md\"></div>\n\t</header>"
  }
]

我使用了子程序()，但是它没有取内部类名，我得到的输出是main-头黑bg行空间-9隐藏-md，通过在变量中接受json数据使用下面的代码。

if($(t).children().length > 0){
console.log($(t).children().length);
//OUTPUT SHOWING 2
}

Answer 1

为了实现这一点，您可以使用一些相对简单的递归来遍历HTML字符串中的DOM树，如下所示：

​

var data = [{
  "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n<a class=\"icons-darkbg-slogan main-header__slogan\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/\" data-event_title=\"Header Home::Slogan\" href=\"/\" target=\"_self\" title=\"DWS Homepage\"><img src=\"/globalassets/images/logos/dws_logo_global.svg\" class=\"icon-svg hide-for-print\" alt=\"dws_logo_global\"></a>\n\t\t</div>\n\n\t\t<div class=\"space-9 hide-md\"></div>\n\t</header>"
}]

function buildClassArray($el, arr) {
  arr = arr || [];
  $el.each(function() {
    arr.push($(this).prop('class'));
    $(this).children().each(function() {
      buildClassArray($(this), arr);
    })
  });  
  return arr;
}

var classes = buildClassArray($(data[0].Field1));
console.log(classes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

请注意，如果希望单个元素上的多个类出现在数组中它们自己的实体中，只需在将类字符串推送到数组之前，只需将其split()：

​

var data = [{
  "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n<a class=\"icons-darkbg-slogan main-header__slogan\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/\" data-event_title=\"Header Home::Slogan\" href=\"/\" target=\"_self\" title=\"DWS Homepage\"><img src=\"/globalassets/images/logos/dws_logo_global.svg\" class=\"icon-svg hide-for-print\" alt=\"dws_logo_global\"></a>\n\t\t</div>\n\n\t\t<div class=\"space-9 hide-md\"></div>\n\t</header>"
}]

function buildClassArray($el, arr) {
  arr = arr || [];
  $el.each(function() {
    arr.push(...$(this).prop('class').split(' '));
    $(this).children().each(function() {
      buildClassArray($(this), arr);
    })
  });  
  return arr;
}
var $el = $(data[0].Field1);
var classes = buildClassArray($el);
console.log(classes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​