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