JQuery - 通过获取 html 元素创建数组对象，点击属性答案

【问题标题】：JQuery - create array object by taking html elements,attributes on clickJQuery - 通过获取 html 元素创建数组对象，点击属性
【发布时间】：2018-03-20 21:14:02
【问题描述】：

正如您在下面看到的，我有一个示例 JSON 数组对象。这就是我希望 JSON 结构最终的样子。我希望根据列表内的锚标记动态生成对象。如您所见，标题是锚标记的名称（html()），而 URL 是 href 属性。因此，单击创建 JSON 按钮时，一个函数将遍历所有列表及其锚标记，并创建如下示例所示的对象。我的尝试并没有走得太远，我试图获取所有锚标记的 html，然后得到 a.html() 的标题和 a..attr('href') 的链接。我该怎么做呢？

JSON 数组对象示例

[

    {
        "id": "1",

        "Title": "Google",

        "URL": "https://www.google.com"

    },

    {
        "id": "1",

        "Title": "yahoo",

        "URL": "https://www.microsoft.com"

    }

]

HTML

function createJson() {
var linkjson=[];
var listItemsA = $(".addlink_dynlist > li").find('a');
listItemsA.each(function(a) {
console.log(a);
    //linkjson.push({id:1,Title:a.html()})

});

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

【问题讨论】：

你只想要 .addlink_dynlist 里的一个元素？
感觉你只想要url和文本，为什么不在你的jquery中使用“addlink-a”类呢？ $("#addlink-a").each(function(a) { .... });
@MuradSofiyev 是的。
@KeithAymar 哦，我想。它们都将被动态列出，所以我希望它们都具有相同的类名
@KeithAymar 你的意思可能是 $(".addlink-a").each(function(a) { .... });

标签： javascript jquery html arrays json

【解决方案1】：

我不确定你想要的 id 是什么？

function createJson() {
  var linkjson = $(".addlink_dynlist > li a").map((index, a) => {
    return { id: a.id, Title: a.innerText, URL: a.href };
  }).get();
  console.log(linkjson);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

【讨论】：

谢谢，这似乎是解决我的问题的最干净的方法。

【解决方案2】：

试试这个。

function createJson() {
  var linkjson=[];
  var listItemsA = $(".addlink_dynlist > li").find('a');
  listItemsA.each(function(a) {
       var x={};
       x.id=1;
       x.title=$(listItemsA[a]).html();
       x.url=$(listItemsA[a]).attr('href');
      linkjson.push(x)
  });
  console.log(linkjson);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

【讨论】：

【解决方案3】：

window.createJson = function createJson() {
    var linkjson=[];
    var listItemsA = $(".addlink_dynlist > li a")
  linkjson = listItemsA.map(function(index, node) {
     var $node = $(node);
     return {id: index, text:$node.text(), URL: $node.attr("href")}
  })
}

如果我理解正确，你的函数看起来像这样

【讨论】：

【解决方案4】：

你必须寻找每个元素的属性集合。您的函数可以接受给定的选择器并返回一个对象数组，其中包含与选择器匹配的所有元素的属性：

function createJson(selector) {
  var linkjson=[];
  Array
    // Grad HTMLElements
    .from(document.querySelectorAll(selector))
    // Only keep attribute collections
    .map(x => x.attributes)
    // Add a new entry to linkjson for each element
    .forEach(at => {
      let item;
      linkjson[linkjson.length] = {};
      item = linkjson[linkjson.length-1];
      Array.from(at).forEach(a => (item[a.name] = a.value) );
  });
  return linkjson
}

console.log(createJson('.target'));

<p title="test1" class="target" id="theId1">Element1</p>
<p title="test2" class="target" id="theId2">Element2</p>
<p title="test3" class="target" id="theId3" data-test="3">Element3</p>

【讨论】：

这个解决方案是动态的，这意味着它将为每个匹配选择器的元素分级所有属性。另外它不依赖 jQuery。