Retrieving single parts of a javasript/jquery object - javascript

Hi suppose I have a jQuery selector such as this:
var a = $(this);
var b = a.nextUntil("button").text();
This will retrieve all the DOM elements till the next button. I want to access all these DOM elements individually as separate objects. Is there way to do that?

If you want to execute a function for each of the elements, you can use .each
If you want all the objects to be in an array, you can do something like this:
var arr = a.nextUntil("button")
and then index it as an array.
console.log($(a[0]).text())

Related

How to pop out the objects from a javascript array

I'm implementing asp.net core 3.1 and have a JQuery DataTable in which the first column holds checkboxes. I'm keeping the selected rows objects in an array like the following for future manipulation. But my problem is how can I get access to each object from the last to the first one, something like I want to pop them out one by one and use them.
var OTable = $("#myDummyTable").dataTable();
$("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {
var row = $(this).closest('tr');
var newRow = oTable.row(row);
keepSelectedRows.push(newRow);
});```
If there are elements in your array, and these elements are objects, you can just do
myArr.pop()
I'm assuming that your array is an array of objects!
To access that element,
let el = myArr.pop();
This should work.

Parsing a list of objects in javascript via index

var Filtered_Region = imageCollection.filterBounds(geometry);
var Filtered_Meta_Reg = Filtered_Region.filterMetadata('CLOUD_COVER','less_than', 20)
var Filtered_Date_Meta_Reg = Filtered_Meta_Reg.filterDate('2019-01-01','2019-12-31')
print(Filtered_Date_Meta_Reg.size())
var Filtered_Free_image = Filtered_Date_Meta_Reg.first();
Using this piece of code in javascript i have a list(??) of class imageCollection objects which are filtered down to 30 using some methods.What i would like to do now is access these elements one by one.
I found that using .first() gives me the first element of this list(please correct me if the type produced is not a list) but i can't access the rest.
What i would like to do is via index use something like Filtered_Date_Meta_Reg[2],Filtered_Date_Meta_Reg[3] and access the 2nd and third element.How could this be done?

insertBefore function for arrays and/or HTMLCollections?

Does there exist a function in vanilla JavaScript or jQuery that operates similarly to Node.insertBefore(), but for arrays and/or HTMLCollections?
An example could look something like:
var list = document.getElementsByClassName("stuff");
var nodeToMove = list[0];
var otherNode = list[4];
list.insertBefore(nodeToMove, otherNode);
Basically I'm trying to perform insertBefore() without manipulating the actual DOM, as I want the changes to only be applied to the DOM under certain conditions. If those conditions are met, then I would perform insertBefore() on the actual nodes.
To clarify, I'm looking for a function that would insert an element before a target element at a given index in an array, not necessarily at a given index. Examples I've seen using splice() usually insert an element at a given index, which sometimes puts the element before the target element, and sometimes after, depending on where the element to be moved originally was in the array. I'm looking for something that would reliably put the element to be moved before the target element.
HTMLCollection does not have an insertBefore method. jQuery can apply any jQuery methods both to a single element being selected, as well as many.
https://api.jquery.com/insertBefore/
There is no single method to do this in one step, but there doesn't need to be. If you convert the collection to an Array, you can call the Array.prototype.splice() method to achieve the same result.
Here's an example:
let ary = [1,2,3,4,5];
// Swap 2 and 3
// Start at the 3rd item and remove one item (3).
// Store the removed item
let removed = ary.splice(2,1);
// Start at the second item, don't remove anything, insert the removed
// item at that position
ary.splice(1,null,removed[0]);
// Log the result
console.log(ary);
And, with that knowledge, you can create your own more easily callable function:
let ary = [1,2,3,4,5];
function insertBefore(ary, newItem, target){
ary.splice(target,null,newItem);
}
// Insert 999 before the 3rd array item
insertBefore(ary,999,2)
console.log(ary);
You need to get the index you want, then use Array.splice.
Myself I would do something like this :
const myArr = ['Aurore', 'Dimitri', 'Alban', 'Frédéric'];
const insertBeforeThis = 'Alban';
const eltToInsert = 'Laura';
const index = myArr.findIndex(name => name === insertBeforeThis);
myArr.splice(index, 0, eltToInsert);
Please feel free to try it out in your browser's console. Note i used const for my array, as it fixes the type of the variable as an array but allow me to manipulate it.
MDN: Array.prototype.findIndex()
stackoverflow: How to insert an item into an array at a specific index (JavaScript)?
Have a happy coding time!

Jquery for each in HTML string

I have an HTML string, which I get from using getJSON method. I want to iterate through this whole string, find all divs with class product-review and push its content to my array. What is the best way to do this?
1st : you need to select the 'div.product-review' by using .find()
$(response).find('div.product-review')
2nd: you need to loop through them and push its content to the array
var contentarray = [];
$(response).find('div.product-review').each(function(){
var ThisIt = $(this);
contentarray.push(ThisIt.text());
});
console.log(contentarray);
You can add that string into a hidden element, then find in that hidden element all divs
var YOUR_CONTENT=$(".hiddelElement div.product-review").text();

Store Jquery object and access later?

I'm trying to store Jquery object into an array and access later to apply Jquery methods.
Something like:
var myArr = [];
myArr.push($('div#id1'));
myArr.push($('div#id2'));
$(myArr).show();
This is not working
You're trying to execute the show method on the array passed to jQuery, not on each object, try something like this:
$.each(myArr, function(k, elem) {
$(elem).show();
})
If you insist on storing your jQuery objects in an array, you will need to map that array to a new jQuery object before being able to call jQuery methods on it to affect your stored objects.
You can use jQuery's .map() for that:
var myArr = [];
myArr.push($('div#id1'));
myArr.push($('div#id2'));
$(myArr).map(function(){ return this.toArray(); }).show();
JSFiddle
Why are you storing the items in an array to begin with? If you only need to perform operations over multiple items you can simply do either of the following:
$('selector1, selector2').operation();
$('selector1').add('selector2').operation();
Another way, all JQueried ^^ :
var myElements = $('div#id1');
myElements = myElements.add('div#id2');
myElements.show();
To reverse the .add() you can use .not :
myElements = myElements.not('.clazz');
myElements.hide();

Categories

Resources