通过从动态html (jquery)中的数据中查找元素来获取id
通过从动态html (jquery)中的数据中查找元素来获取id
提问于 2021-02-19 00:56:13
我正在尝试在扫描条形码sku事件期间获得元素id，并根据li中的data-sku获得get element，后者在E 110ULE 211下动态添加，后者是从页面加载的另一个函数中加载的。
我尝试了许多方法作为指导，但它似乎是我错过了一些东西，因为我无法得到理想的结果，以下我正在尝试的是最后一个看起来更相对。
我在UL中拥有的数据在加载的另一个函数中动态添加
<div class="inside" id="grid_layout_cycle" data-offset="0" data-parent="0" style="height: 382px;">
<ul>
<li id="product_1886" class="title_product add_grid_tile category_cycle" data-sku="ORD_1879_1886" data-id="1886" data-root-category="[undefined]" title="_1879" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_1879</span><span class="price">Free!</span></li>
<li id="product_4538" class="title_product add_grid_tile category_cycle" data-sku="ORD_2604_4538" data-id="4538" data-root-category="[undefined]" title="_2604" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_2604</span><span class="price">Free!</span></li>
<li id="product_4051" class="title_product add_grid_tile category_cycle" data-sku="ORD_3932_4051" data-id="4051" data-root-category="[undefined]" title="_3932" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_3932</span><span class="price">Free!</span></li>
</ul>最后，我调用了以下脚本从data-sku="ORD_3932_4051“中选择元素，并将其记录到控制台中。
var tempProductScan = $("#grid_layout_cycle ul").find("[data-sku='ORD_3932_4051']");
console.log(tempProductScan);我在日志中得到了下面的结果(它不是完整的数组，而是需要理解的概述)，这似乎不应该是这样的。
0: <li id="product_4051" class="title_product add_grid_tile category_cycle" data-sku="ORD_3932_4051" data-id="4051" data-root-category="[undefined]" title="_3932" style="background-image: url(\"ages/placeholder.png\");">
context: HTMLDocument https://impaktt.techchef.org/point-of-sale/main-outlet/testing-new/#
length: 1
prevObject: Object { 0: ul, selector: "#grid_layout_cycle ul", length: 1, … }
selector: "#grid_layout_cycle ul [data-sku='ORD_3932_4051']"
<prototype>: Object { jquery: "1.12.4", constructor: n(a, b), length: 0, … }最后，当我试图从中获取id时，它确实显示了未定义的。
请注意：，当我只调用UL元素时，如下所示，它会给出子节点中的所有元素。
var tempProductScanParent = $("#grid_layout_cycle").find('ul');
console.log(tempProductScanParent);上面我在火狐中得到的结果如下(它不像它的大，但给你一个想法)
{…}
0: ul
accessKey: ""
accessKeyLabel: ""
accessibleNode: AccessibleNode { computedRole: "list", states: (4) […], attributes: (9) […], … }
assignedSlot: null
attributes: NamedNodeMap []
baseURI: "https://impaktt.techchef.org/point-of-sale/main-outlet/testing-new/#"
childElementCount: 50
childNodes: NodeList(50) [ li#product_1886.title_product.add_grid_tile.category_cycle, li#product_4538.title_product.add_grid_tile.category_cycle, li#product_4051.title_product.add_grid_tile.category_cycle
, … ]
children: HTMLCollection { 0: li#product_1886.title_product.add_grid_tile.category_cycle, 1: li#product_4538.title_product.add_grid_tile.category_cycle, 2: li#product_4051.title_product.add_grid_tile.category_cycle
, … }
classList: DOMTokenList [...，您可以在下面看到完整的片段：
var tempProductScan = $("#grid_layout_cycle ul").find("[data-sku='ORD_3932_4051']");
console.log(tempProductScan);
var tempProductScanParent = $("#grid_layout_cycle").find('ul');
console.log(tempProductScanParent);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="inside" id="grid_layout_cycle" data-offset="0" data-parent="0" style="height: 382px;">
<ul>
<li id="product_1886" class="title_product add_grid_tile category_cycle" data-sku="ORD_1879_1886" data-id="1886" data-root-category="[undefined]" title="_1879" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_1879</span><span class="price">Free!</span></li>
<li id="product_4538" class="title_product add_grid_tile category_cycle" data-sku="ORD_2604_4538" data-id="4538" data-root-category="[undefined]" title="_2604" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_2604</span><span class="price">Free!</span></li>
<li id="product_4051" class="title_product add_grid_tile category_cycle" data-sku="ORD_3932_4051" data-id="4051" data-root-category="[undefined]" title="_3932" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_3932</span><span class="price">Free!</span></li>
</ul>
应用了注释中指定的更改--我尝试使用子级()进行跟踪
var tempProductScan = $("#grid_layout_cycle ul");
console.log($(tempProductScan[0]).children());它给出了以下节点，但没有使用data-sku https://i.ibb.co/JtpW0q7/image.png来选择特定的元素
我很好奇，在找到数组或对象的特定数据sku之后，是否有一种方法可以通过键从数组或对象获取元素。
解决方案发现
正如@uing茶先生所指导的那样，通过
元素找到正确的选择器，我就这样做了，并发现选择器错误--我在inspect元素中使用了双引号，然后在脚本中应用了相同的选择器，它就可以工作了。
var tempProductScan = $('#grid_layout_cycle ul li[data-sku="testing"]');
var SKU_ScanId = tempProductScan[0].id;
alert(theID);回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-19 02:25:58
.find()返回数组[]您需要定义索引
var tempProductScan = $("#grid_layout_cycle ul").find("[data-sku='ORD_3932_4051']");
var theID = tempProductScan[0].id;
console.log(theID);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="inside" id="grid_layout_cycle" data-offset="0" data-parent="0" style="height: 382px;">
<ul>
<li id="product_1886" class="title_product add_grid_tile category_cycle" data-sku="ORD_1879_1886" data-id="1886" data-root-category="[undefined]" title="_1879" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_1879</span><span class="price">Free!</span></li>
<li id="product_4538" class="title_product add_grid_tile category_cycle" data-sku="ORD_2604_4538" data-id="4538" data-root-category="[undefined]" title="_2604" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_2604</span><span class="price">Free!</span></li>
<li id="product_4051" class="title_product add_grid_tile category_cycle" data-sku="ORD_3932_4051" data-id="4051" data-root-category="[undefined]" title="_3932" style="background-image: url("https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png");"><span>_3932</span><span class="price">Free!</span></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66270345
复制相关文章
相似问题
腾讯云开发者
