Get id by finding element from data in a dynamic html (jquery)

I am trying to get the element id during scan barcode sku event, and get element according to data-sku in the li which added dynamically under UL which loads from another function on load of page.

I tried many ways as guided but it looks i am missing some thing due to which i am unable to get desired result, following what i am trying is the last looks more relative.

Data i have in UL added dynamically in another function on load

<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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><span>_3932</span><span class="price">Free!</span></li>
</ul>

Lastly i have called following script to select element from data-sku=”ORD_3932_4051″ and log it into the console

var tempProductScan = $("#grid_layout_cycle ul").find("[data-sku='ORD_3932_4051']");
console.log(tempProductScan);

I got the below result in the log (its not complete array but a overview to understand),which seems not as it should be

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, … }

And finally when i am trying to fetch id from this it does shows undefined

Please Note: When i am only calling UL elements as below it gives all element in child nodes.

var tempProductScanParent = $("#grid_layout_cycle").find('ul');
console.log(tempProductScanParent);

result for above i got in firefox is as below (its not complete as its large but to give you an idea)

    {…}
    
    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 [...

The complete snippet you can see below:

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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><span>_3932</span><span class="price">Free!</span></li>
  </ul>

Applied Changes as specified in comment I tried following with children()

var tempProductScan = $("#grid_layout_cycle ul");
console.log($(tempProductScan[0]).children());

it gives following nodes but not selecting specific element by data-sku https://i.ibb.co/JtpW0q7/image.png

i am curious if there is a way to get the element from the array or object by key after finding specific data-sku of it

Solution Found

As Mr @uingtea guided that , find the right selector via inspect element so i did that, and found it was mistake in the selector i used double quotes in inspect element and then apply same in script and it works.

var tempProductScan = $('#grid_layout_cycle ul li[data-sku="testing"]');

var SKU_ScanId = tempProductScan[0].id;
alert(theID);

Answer

.find() return array [] you need to define the index

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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><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(&quot;https://impaktt.techchef.org/wp-content/themes/the-hanger/images/placeholder.png&quot;);"><span>_3932</span><span class="price">Free!</span></li>
  </ul>

Advertisement

Answer