How do I get multiple jquery attr values? - javascript

My code:
http://codepen.io/vincentccw/pen/ecJDG
Basically what I want to get are all the data attribute values from the attr call data-designer
There are suppose to be 4 of them but I can only get the first one using:
var dsad = $('ul').attr("data-designer");
How do I fix this?

You can use each() to interact with each element individually:
$('ul').each(function(){
console.log($(this).data('designer'));
});
Or you can use map() to create an array of all the values which you can deal with separately:
var designers = $('ul').map(function() {
return $(this).data('designed');
});
console.log(designers);
Note, I used data to get the data-* attributes as this is quicker than accessing the attributes of the DOM element directly.

$('ul').each(function(){
console.log($(this).attr('data-designer'))
//you can add to an array also
});

You can use map() to project the attribute values into an array:
var designers = $("ul").map(function() {
return $(this).attr("data-designer");
}).get();

You need to use .each()
$('ul').each(function(){
console.log($(this).attr("data-designer"));
});
Codepen Demo

$('ul').attr("data-designer") just got the attribute for the first ul element. If to get all uls with "data-designer" attribute, try this:
$('ul[data-designer]').each(function(){
console.log($(this).attr("data-designer"));
});

Related

Why does my function return undefined, especially the .split()parts?

So in essence I get the value of input, then try to divide into into different tags via the comma with this
var noteTags = document.getElementsByClassName("noteTag").value;
Tag = noteTags.split(",");
But in console, the split(",") is undefined
Edit: Sorry I forgot to mention that the noteTag element is input, does this change how the code works in any way?
There are two issues,
getElementsByClassName returns an array-like collection of elements (a NodeList).
And instead of value it should be innerText.
Try like below
var noteTags = document.getElementsByClassName("noteTag")[0].innerText;
Tag = noteTags.split(",");
You are using the split() method on an array. You are also trying to access the value property, whereby you should probably use innerText.
You can use querySelector then you dont need using a key[0] to select the element.
const noteTags = document.querySelector("#noteTag");
console.log(noteTags)
Tag = noteTags.innerHTML.split(",");
console.log(Tag)
<div id="noteTag">en,jp,fr</div>

Using queryselectorall with classes

I have a line <div class="price-box price-final_price" data-role="priceBox" data-product-id="176"> in a large html file.
I need to store the value of product-id inside a variable, so that I can access it globally.
I'm tring to do it with
var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].data-product-id;
But it's not working. What am I doing wrong?
If you want to use pure javascript you can use the .getAttribute() method
var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].getAttribute('data-product-id');
if you want to use jquery, you can do this
var var_productid = $('div[data-role="priceBox"]').eq(0).attr('data-product-id');
If you intend to use and retrieve data_attributes in javascript, you need to use dataset instead of only data. Also to get product-id, you need to use camel case
var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].dataset.productId;
console.log(var_productid)
<div class="price-box price-final_price" data-role="priceBox" data-product-id="176"></div>
var productId = $("div[data-role='priceBox']").attr('data-product-id');
dataProductId = document.querySelectorAll("div")[0].getAttribute("data-roduct-id");
Use getAttribute
No need to use querySelectorAll if you only want the first item found, just use querySelector
Snippet:
var productid = document.querySelector('div[data-role="priceBox"]').getAttribute('data-product-id');

jquery each loop get margin of element

I have 7 elements with different margin-left and margin-top properties set on them through css styles on css file. I want to loop through them and collect these margins.
My jquery looks something like this now:
var $elements = $(".elements");
var elementsMargins = [];
$elements.each(function(index){
var elementObj = {
elIndex: index,
elMarginLeft: this.css("margin-left"),
elMarginTop: this.css("margin-top")
};
elementsMargins.push(elementObj);
});
However, I am not able to collect these values. Can someone advice or suggest anything to solve the issue?
Since css() is a jQuery method you have to wrap this in jQuery to use the method. Please use:
$(this).css("margin-left"), //and
$(this).css("margin-top")
instead of this.....
And, I would suggest using the map() method. You do not need to explicitly specify the index as it will be matching the index in the array of each object.
var elementsMargin = $('.elements').map(function() {
return {
elMarginLeft: $(this).css('margin-left');
elMarginTop: $(this).css('margin-top');
};
}).get();

Equivalent of getElementById for Classes in Javascript

I'm currently making a game, and I'm trying to change the CSS values of a whole class of objects. For a single ID, I would use, document.getElementById("idHere"), but I need something like document.getElementByClass("classHere"). Thanks!
There is simply document.getElementsByClassName("myClass"), which returns an array of all the elements with that HTML class.
If you're using jQuery, you can do it with $(".myClass"), which will return a collection of all of the elements with that class.
There exists getElementsByClassName; see document.getElementsByClassName on MDN.
If you can use JQuery I suggest $('.classHere').
Two ways to do it:
document.getElementsByClassName("theClassName");
document.querySelectorAll(".theClassName");
These methods won't work on older browsers (like IE7 or IE8). In this case you'll have to iterate through elements to check the class name, or rely on a library like jQuery.
If you can't or don't want to use jQuery, do the following:
function changeClassName(className, newClassName) {
var elements = document.getElementsByClassName(className);
for (var i = 0; i < elements; ++i) {
var item = elements[i];
item.className = newClassName;
}
}
If you decide to use jQuery:
function changeClassName(className, newClassName) {
$('.'+className).toggleClass(newClassName);
}
If you need to change CSS values according to class name you can just use:
document.getElementsByClassName("classname");
this will return you an array of all elements in whole document that have class which you search.
This will allow you to write a loop to change CSS for all of returned elements.

How do I get the id of the selected node in jsTree?

How can I get the id of the selected node in a jsTree?
function createNewNode() {
alert('test');
var tree = $.tree.reference("#basic_html");
selectedNodeId = xxxxxxxxx; //insert instruction to get id here
tree.create({ data : "New Node Name" }, selectedNodeId);
}
Unable to get harpo's solution to work, and unwilling to use Olivier's solution as it uses internal jsTree functions, I came up with a different approach.
$('#tree').jstree('get_selected').attr('id')
It's that simple. The get_selected function returns an array of selected list items. If you do .attr on that array, jQuery will look at the first item in the list. If you need IDs of multiple selections, then treat it as an array instead.
Nodes in jsTree are essentially wrapped list items. This will get you a reference to the first one.
var n = $.tree.focused().get_node('li:eq(0)')
You can replace $.tree.focused() if you have a reference to the tree.
To get the id, take the first matched element
if (n.length)
id = n[0].id
or you can use the jQuery attr function, which works on the first element in the set
id = n.attr('id');
In jstree version 3.1.1, you can get it directly from get_selected:
$("#<your tree container's id>").jstree("get_selected")
In the most recent version of jsTree (checked at 3.3.3), you can do this to get an array of IDs:
var ids = $('#tree').jstree('get_selected');
This will return, for example, ["selected_id1", "selected_id2", "selected_id3"]. If you want to get the selected nodes (not IDs), you can do this:
var nodes = $('#tree').jstree('get_selected', true);
The current docs contain more information.
$.jstree._reference('#my_tree_container')._get_node(null, true).each(function() {
id = $(this).attr("id");
alert('Id selected: ' + id);
});
I was having problems getting the selected ids from a tree with MULTIPLE selections. This is the way I got them:
var checked_ids = [];
$("#your-tree-id").jstree('get_selected').each(function(){
checked_ids.push($(this).data('id'));
});
In my case, the data call doesnt work.
I succeed in accessing my node data by using attr function.
$("#tree").jstree("get_selected").attr("my-data-name");
to get all selected ids use the below code
var selectedData = [];
var selectedIndexes;
selectedIndexes = $("#jstree").jstree("get_selected", true);
jQuery.each(selectedIndexes, function (index, value) {
selectedData.push(selectedIndexes[index].id);
});
now you have all the selected id's in the "selectedData" variable
<script type="text/javascript>
checked_ids.push($(this).context.id);
</script>
Just use
var nodeId = $('#FaqTreeView').jstree().get_selected("id")[0].id;
where #FaqTreeView is the id of your div that contains the jstree.
In some cases and/or jstree versions this solution doesn't work.
$('#tree').jstree('get_selected').attr('id');
Instead of defined "id" I get nothing.
What did the trick for me is:
$("#tree").jstree("get_selected").toString();
These are all old answers for old versions. As of version 3.3.3 this will work to get all attributes of the selected node.
$('#jstree').jstree().get_selected(true)[0]
If you then want the id then add .id at the end. You can look at all the other attributes in web developer tools if you copy the above code.
You can use the following code
var nodes = $("#jstree_demo_div").jstree(true).get_selected("full", true);//List of selected node
nodes[0].id//Which will give id of 1st object from array
With the latest version of jsTree, you can do it as follows:
var checked_ids = [];
$('#your-tree-id').jstree("get_checked",null,true).each(function(){
checked_ids.push(this.id);
});
alert(checked_ids.join(","));

Categories

Resources