如您在下面看到的,我有一个示例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>

最佳答案

我不确定您想要的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>

10-05 21:02
查看更多