convert this 'array-like' collection to an arrayĮlements_in_outer = (elements_in_outer) įound_elements = found_elements. document.querySelectorAll() returns an 'array-like' collection of elements Var elements_in_outer = outers.querySelectorAll('.thumb') This means that it behaves like a FirstOrUndefined. Var outers = document.querySelectorAll('.post') The javascript find function returns either The first item that satisfies the condition or undefined.

You need to find all outer matched elements, and then find inner matched elements of each of them. JQuery code : // This will give all 4 inner elements with class 'thumb'Ĭonverting this to pure Javascript is not very direct. You just need to chain document.querySelector and document.querySelectorAll methods : document.querySelector('#post').querySelectorAll('.thumb')Ĭomplex Case - When Outer Selector is a Collection of Elements Simple Case - When Outer Selector is a Single Element Ĭonverting this to pure Javascript is fairly simple. I'll demonstrate the conversion of find() to Javascript using simple examples. It works in the same way, the difference being :ĭocument.querySelector() returns a single element.ĭocument.querySelectorAll() returns an 'array-like' collection of elements. document.querySelector : This method returns returns only the first element that matches a specified CSS selector.document.querySelectorAll : This method returns all elements in the document that matches a specified CSS selector as an array-like collection of DOM elements (NodeList).Let us see another example, wherein the result would be undefined − Exampleĭocument.getElementById('demo').innerHTML = pointsArr.To do the conversion of $.find() to pure Javascript, you need to know 2 native Javascript methods : Var pointsArr = ĭocument.getElementById('demo').innerHTML = pointsArr.find(pointsFunc) Get the points (first element) above 400. The this value parameter is the value to be passed to the function. The index is the array index, and arr is the array. Here, function is a function with val, which is the value of the current element. The syntax is as follows − array.find(function(val, index, arr),thisValue) The find() method of JavaScript is used to return the first elements value in an array, if the condition is passed, otherwise the return value is undefined.

Javascript find function