Question

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

示例JSON 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>"
  }
]

我已经使用了children（）但它没有采用内部类名，我得到的输出是 main-header dark-bg row space-9 hide-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>

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

1 个答案: