使用jQuery正确获取动态div数据 [英] Get dynamic div data properly with jQuery
本文介绍了使用jQuery正确获取动态div数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手编码员.我需要解析一些从jQuery页面提取的JSON.我可以从div获取所需的信息，但是由于需要特定的preloadImageURIs字段，因此无法对其进行处理.这是我的代码和我得到的控制台日志.任何帮助将不胜感激.
I'm a newbie coder. I need to parse some JSON that is extracted from a page with jQuery. I can obtain the desired information from the div, but I'm unable to process it as I need a specific preloadImageURIs field. Here is my code and the console log I got. Any help will be appreciated.
(function($){
$(document).ready(function(){
console.log('Extension Started!');
var el = $(document).find('#stories_tray');
if( el.length > 0 ){
console.log(el);
}
child = el.find('._827c');
console.log(child);
$.each(child, function(i){
var div = $(child[i]);
console.log(div);
var l = JSON.parse(div.find('._7h4p')
.attr('data-onkeypress'));
console.log(l);
});
});
}(jQuery));
在DOM和JSON上找到的l div元素的控制台日志
console log of the l div elements found on DOM and JSON parsed
[{…}]
0:
a: Array(1)
0:
bucketID: "1921598911247563"
event: {__event: 1}
index: 1
item: {__elem: 1}
preloadImageURIs: Array(3) // <= I need the arrays field
0: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/69780485_2441252579294828_8876286521255133184_o.jpg?_nc_cat=108&_nc_oc=AQmlW6GFkruaEVfXc9eF72TGUmeYNrbcMi4NhtMwnYKY3jHZ2PfEGtuRrLw1zW3tKL8&_nc_ht=scontent-mxp1-1.xx&oh=35a387eb224b40a53fa9843f2dea96ea&oe=5E0476EE"
1: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/fb50/69486769_2441252732628146_164259843119513600_n.jpg?_nc_cat=105&_nc_oc=AQlY1PsI20i3QfCgj4y5HNI3ouTO3Omja80UnllPyg4QtwkeQXHsBTt_FpZhLhTUN1Q&_nc_ht=scontent-mxp1-1.xx&oh=ffdec3a02ba1625765c30145d74bce5b&oe=5E0A8BB1"
2: "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-0/fb10/s235x350/69220266_2441252575961495_7888583749871337472_n.jpg?_nc_cat=109&_nc_oc=AQlY0yR_UpynhU27e5ojqEplSoapKMoJMPaUgqH6JH_S3WddZg5Mrr-yy6PI_W-AU-E&_nc_ht=scontent-mxp1-1.xx&oh=e85647164edc3d7eaaefb22f06c80660&oe=5DC8BBA1"
length: 3
__proto__: Array(0)
preloadVideoIDs: []
source: null
traySessionID: "ff3939d3-6318-4834-a2e3-283f993f6b40"
__proto__: Object
length: 1
__proto__: Array(0)
k: "stories-tray"
meth: "onStoryTrayItemSelect"
mod: "FBStoriesTray2"
__proto__: Object
length: 1
__proto__: Array(0)
// .div console log
r.fn.init [div._827c]
0: div._827c
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: data-onmouseover, 1: class, data-onmouseover: data-onmouseover, class: class, length: 2}
autocapitalize: ""
baseURI: "https://www.facebook.com/"
childElementCount: 1
childNodes: NodeList [div._7h4p]
children: HTMLCollection [div._7h4p]
classList: DOMTokenList ["_827c", value: "_827c"]
className: "_827c"
clientHeight: 201
clientLeft: 0
clientTop: 0
clientWidth: 113
contentEditable: "inherit"
dataset: DOMStringMap {onmouseover: "[{"mod":"FBStoriesTray2","meth":"onMouseOverStoryTrayItem"}]"}
dir: ""
draggable: false
firstChild: div._7h4p
firstElementChild: div._7h4p
hidden: false
id: ""
innerHTML: "<div data-onkeypress="[{"mod":"FBStoriesTray2","meth":"onStoryTrayItemSelect","k":"stories-tray","a":[{"item":{"__elem":1},"bucketID":"1807193582626548","traySessionID":"462fb7d0-e57d-4ee5-9ae9-e0e638644463","index":0,"preloadImageURIs":["https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=ee1b01f4bb4b920a380e1813bfa63459&oe=5DD6E037",null,"https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=58905f74ac74bd1c6dcd2190b75ce4ea&oe=5DD5A1F2"],"preloadVideoIDs":[],"event":{"__event":1},"source":null}]}]" data-onclick="[{"mod":"FBStoriesTray2","meth":"onStoryTrayItemSelect","k":"stories-tray","a":[{"item":{"__elem":1},"bucketID":"1807193582626548","traySessionID":"462fb7d0-e57d-4ee5-9ae9-e0e638644463","index":0,"preloadImageURIs":["https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=ee1b01f4bb4b920a380e1813bfa63459&oe=5DD6E037",null,"https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=58905f74ac74bd1c6dcd2190b75ce4ea&oe=5DD5A1F2"],"preloadVideoIDs":[],"event":{"__event":1},"source":null}]}]" class="_7h4p" tabindex="0" style="width:113px; height: 201px;background-color: #C0E3F0FF"><div class="_816s" id="u_ps_0_7_0"></div><div class="uiScaledImageContainer _7h4s" style="width:113px;height:201px;"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=d63805f57b71cac235c5bc6c38efc781&oe=5E137F61" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=d63805f57b71cac235c5bc6c38efc781&oe=5E137F61" style="top:-6px;" alt="" width="113" height="214"></div><span class="_7h4q"><div class="_7lf_ _26w4 _26w9 _26wu size-small"><div class="uiScaledImageContainer _26w6"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&_nc_ht=scontent-mxp1-1.xx&oh=c2e6943593c7c0993432e5dbe17bdb79&oe=5DD174EE" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&_nc_ht=scontent-mxp1-1.xx&oh=c2e6943593c7c0993432e5dbe17bdb79&oe=5DD174EE" alt="" width="40" height="40" data-ft="{"tn":"-^"}" itemprop="image"></div><span class="img _55ym _55yq _55yo _26ww" aria-busy="true" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Caricamento..."></span></div><svg class="_7lg0" height="42" width="42"><g class="_7lim"><circle class="_7lg1" cx="21" cy="21" fill="none" r="19" stroke="#4080ff" stroke-width="4"></circle></g></svg></span><span class="_7h4r"><div class="_mx9 wrap light verbose"><div class="_mxb" dir="auto"><span class="_nbt"><div id="u_ps_0_7_1"><div class="_4ik4 _4ik5" style="-webkit-line-clamp: 3;">Lucia Ladybug Cordella</div></div></span></div></div></span></div>"
innerText: "Lucia Ladybug Cordella"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: div._7h4p
lastElementChild: div._7h4p
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div._827c
nextSibling: div._827c
nodeName: "DIV"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 201
offsetLeft: 132
offsetParent: div._nyb
offsetTop: 40
offsetWidth: 113
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<div data-onmouseover="[{"mod":"FBStoriesTray2","meth":"onMouseOverStoryTrayItem"}]" class="_827c"><div data-onkeypress="[{"mod":"FBStoriesTray2","meth":"onStoryTrayItemSelect","k":"stories-tray","a":[{"item":{"__elem":1},"bucketID":"1807193582626548","traySessionID":"462fb7d0-e57d-4ee5-9ae9-e0e638644463","index":0,"preloadImageURIs":["https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=ee1b01f4bb4b920a380e1813bfa63459&oe=5DD6E037",null,"https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=58905f74ac74bd1c6dcd2190b75ce4ea&oe=5DD5A1F2"],"preloadVideoIDs":[],"event":{"__event":1},"source":null}]}]" data-onclick="[{"mod":"FBStoriesTray2","meth":"onStoryTrayItemSelect","k":"stories-tray","a":[{"item":{"__elem":1},"bucketID":"1807193582626548","traySessionID":"462fb7d0-e57d-4ee5-9ae9-e0e638644463","index":0,"preloadImageURIs":["https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=ee1b01f4bb4b920a380e1813bfa63459&oe=5DD6E037",null,"https:\/\/scontent-mxp1-1.xx.fbcdn.net\/v\/t15.5256-10\/fb10\/s235x350\/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=58905f74ac74bd1c6dcd2190b75ce4ea&oe=5DD5A1F2"],"preloadVideoIDs":[],"event":{"__event":1},"source":null}]}]" class="_7h4p" tabindex="0" style="width:113px; height: 201px;background-color: #C0E3F0FF"><div class="_816s" id="u_ps_0_7_0"></div><div class="uiScaledImageContainer _7h4s" style="width:113px;height:201px;"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=d63805f57b71cac235c5bc6c38efc781&oe=5E137F61" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10/p228x119/67557518_10218681899669860_5427076471422189568_n.jpg?_nc_cat=104&_nc_oc=AQli_eGw3pHwSIuWZe0li7ozuj6cbwv8mIDH-2xx5J7KlaVDdbeSlZLxb58yqXzZgeg&_nc_ht=scontent-mxp1-1.xx&oh=d63805f57b71cac235c5bc6c38efc781&oe=5E137F61" style="top:-6px;" alt="" width="113" height="214"></div><span class="_7h4q"><div class="_7lf_ _26w4 _26w9 _26wu size-small"><div class="uiScaledImageContainer _26w6"><img class="scaledImageFitWidth img" src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&_nc_ht=scontent-mxp1-1.xx&oh=c2e6943593c7c0993432e5dbe17bdb79&oe=5DD174EE" data-src="https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-1/c0.0.80.80a/p80x80/67867821_10218556902225002_3156177329013653504_n.jpg?_nc_cat=111&_nc_oc=AQn_zY5vFLq_ml1M0bJfZi1T3z3m7dnDJRi3kvzv7fR1Y65KGDSRyYvJFBX22_lGzjc&_nc_ht=scontent-mxp1-1.xx&oh=c2e6943593c7c0993432e5dbe17bdb79&oe=5DD174EE" alt="" width="40" height="40" data-ft="{"tn":"-^"}" itemprop="image"></div><span class="img _55ym _55yq _55yo _26ww" aria-busy="true" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Caricamento..."></span></div><svg class="_7lg0" height="42" width="42"><g class="_7lim"><circle class="_7lg1" cx="21" cy="21" fill="none" r="19" stroke="#4080ff" stroke-width="4"></circle></g></svg></span><span class="_7h4r"><div class="_mx9 wrap light verbose"><div class="_mxb" dir="auto"><span class="_nbt"><div id="u_ps_0_7_1"><div class="_4ik4 _4ik5" style="-webkit-line-clamp: 3;">Lucia Ladybug Cordella</div></div></span></div></div></span></div></div>"
outerText: "Lucia Ladybug Cordella"
ownerDocument: document
parentElement: div._7h4v
parentNode: div._7h4v
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: div._827c
previousSibling: div._827c
scrollHeight: 201
scrollLeft: 0
scrollTop: 0
scrollWidth: 113
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "DIV"
textContent: "Lucia Ladybug Cordella"
title: ""
translate: true
__proto__: HTMLDivElement
length: 1
__proto__: Object(0)
更新
我已经重新编写了代码，现在如果我做一个consol.log()，我会得到:
UPDATE
I've reworked the code, now if I do a consol.log() I obtain this:
var el = $(document).find('#stories_tray');
if( el.length > 0 ){
}
child = el.find('._827c');
$.each(child, function(i){
var div = $(child[i])
.find('._7h4p')
.attr('data-onkeypress');
var l = JSON.parse(div);
console.log(l[0].a);
});
// console.log(l[0].a) output
[{…}]
0:
bucketID: "1294313527412940"
event: {__event: 1}
index: 0
item: {__elem: 1}
preloadImageURIs: (3) ["https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10…x&oh=6c2073b1f4136bdc8e51de5f5cfddbd3&oe=5DD415B0", "https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/fb50…x&oh=01bc9897de4eef2085c2540eb8e74cd3&oe=5E11C5E6", "https://scontent-mxp1-1.xx.fbcdn.net/v/t15.5256-10…x&oh=cc9309be18a2f3493227082141dfaf06&oe=5E0FAC9B"] // this is the array with info I need. It's logged on mouse over in this way [0].preloadImageURIs
preloadVideoIDs: []
source: null
traySessionID: "09db6229-70c1-48c0-b39e-2625cff45f34"
__proto__: Object
length: 1
__proto__: Array(0)
但是我无法访问所需的属性，如果尝试console.log(l [0] .a [0] .preloadImagesURIs，则会出现此错误Uncaught TypeError: Cannot read property '0' of undefined.第一个div元素是未定义的，因为它没有我需要的子div，因此也需要跳过它.
But I can't access to the desired property, I get this error Uncaught TypeError: Cannot read property '0' of undefined if I try console.log(l[0].a[0].preloadImagesURIs) . The first div element is undefined because it's not have the child div I need, so I need also to skip it.
推荐答案
感谢您对开发人员的帮助！
我通过重新编写代码找到了解决方案.我删除了一些不必要的代码，并链接了所有方法来解析父div，该父div持有包含所需信息的子级div.像l[0].a[0].preloadImageURIs[0]这样的常规语法将不起作用，并会产生一个奇怪的错误.我在SO上搜索了可能的解决方案，以迭代对象中的嵌套数组，我发现此
Thanks for your helps devs!
I've find out a solution by reworking my code. I've removed some unnecessary code and I've chained all the methods to parse the parent div who hold the child one that contains the informations I need. The usual syntax like l[0].a[0].preloadImageURIs[0] will not work and produce a strange error. I've searched on SO for a possible solution to iterate the nested array in the object and I found this interesting solution.I've adapted it for my code:
(function($){
$(document).ready(function(){
console.log('Extension Started!');
var el = $(document).find('#stories_tray');
child = el.find('._827c');
$.each(child, function(i){
var div = $(child[i])
.find('._7h4p')
.attr('data-onkeypress');
var d = JSON.parse(div);
const l = uri => d[0].a.find(e => e.uri).preloadImageURIs;
console.log(l());
});
});
}(jQuery));
出于好奇，任何人都知道如何将数组的返回值拆分为三个单独的链接?现在我得到了我想要的东西，但它一次打印了三个div的所有第一个链接.
Just for curiosity, anyone know how I can split in three separate link the returned values of the array?Now I got what I want but it print all the first one link of the three divs in once.
这篇关于使用jQuery正确获取动态div数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
