Develop Reference

Select element by data defined with jquery

I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?

Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()

You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});

get id and value dynamically created element jquery

I need the id(and other attributes such as value) of a span i previously created on an ajax event.
Is there a way to do this?
This is how the span is created on php post:
echo "<span class='non-skin-symptom-choice disease_option' ".
"onclick='showinfo(".$var[0].");' id=".$var[0].">"
.$var[1]." -- ".number_format($var[3]*100, 2, '.', '')."%</span>";
and I want to get its id whenever a checkbox is clicked.
$(".chb").click(function(){
var id= $(this).attr('id');
var list=[];
$('.disease_option').each(function (){
alert("this.val=="+ $(this).attr("val")); //i need the value here
var str= $(this).attr("value").split(" -- ")[1];
alert(str);
str=str.slice(0,str.length - 1);
if(parseFloat(str) >=support)
list.push(id) //i need the id here
});
the checkbox is not dynamically created, so $(".chb").click(function(){} works.
somehow, $(this).attr("id") works but $(this).attr("val") returns undefined... i also tried $(this).attr("value") but same results. $(this).val returns empty.

use
$(document).on('click','.chb',function(){
var id = $(".non-skin-symptom-choice").attr("id");
})
as this have a high level event attachment and it can get the elements who have been created on a runtime

Try this
alert($(".non-skin-symptom-choice").attr("id"));

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have create a "delegated" binding by using on()
$(document).on('click','.chb',function(){
var id = $(".non-skin-symptom-choice").attr("id");
})
possible duplicate: Click event doesn't work on dynamically generated elements

If your DOM node did not exist when the page loaded (ie. it was added to the page via AJAX after the page loaded), jQuery cannot see it if you try to update it or read it with jQuery methods. One way to overcome this is to set up your jQuery function to reference the class or ID of the parent of the node you want to target (assuming the parent class is loaded into the page on page load), along with the class of the node you want to target. For example:
$(".chb").click(function(){
var id = $(".your-parent-class .non-skin-symptom-choice").attr("id");
}
}

JQuery selector by data attribute when data is added dynamically?

I have a ul with several items. I populate the list dynamically after page load using jquery. As I add each list item, I also add an "itemID" to the data of that element using the jquery ".data()" function. Something like this:
var item = $('<li>My Item Name</li>');
item.data('itemID', '123ABC456');
Later, I need a selector to determine if there is any item in my item list with a specific itemID. First I tried using:
$('*[data-itemID="123ABC456"]');
This didn't work - and on further research, I discovered that this syntax only works if the data attribute was set in the DOM when the page was loaded; it doesn't work if you use the ".data" jquery method dynamically.
Next I tried:
$(':data(itemID==123ABC456)');
For some reason, this doesn't work. If I run simply $(':data(itemID)'), however, then I do get all the li elements that have an itemID in their data.
I know that the itemID attribute is set correctly, as when I call .data() on that list item I get:
Object { itemID="123ABC456"}
How can I select all elements that have an itemID of "123ABC456" in their data?

http://jsfiddle.net/w28p9/1/ <-- jsFiddle example showing differences with data-attribute & jquery.data()
jQuery.data() is different than HTML5 data-NAME attributes which you are trying to search for.
http://api.jquery.com/jQuery.data/
jQuery.data() saves inside of the jquery element (this data is hidden from plain sight).
Looking for [data-itemID] would work if inside of the actual had: <li data-itemID="12345"></li>.
To retrieve and look for the actual hidden .data() try:
// of course be more specific than just searching through all <li>'s
$('li').each(function () {
if ( $(this).data('itemID') === '123ABC456' ) {
// do whatever you wanted to do with it
}
});
Hope that helps!

Instead of
$(item).data('itemID', '123ABC456')
use
$(item).attr('data-itemID', '123ABC456')
Then you can use
$('[data-itemID=123ABC456]')
as a selector

How about putting the itemID in the DOM:
var item = $('<li itemID="'+itemid+">My Item Name</li>');

What am I getting wrong in this Jquery code, wishing to select an element where attribute is equal to particular value

I wish to just select and place border around
.L1Cell element where attribute name parent equals
to Workstaion. However it's selecting all .L1Cell elements it seems.
Here's the JSFIDDLE
$(document).ready(function () {
var firstLevel = $('#MenuContainer').find('.FirstLevel').attr('parentname','Desktop-Mobile');
firstLevel.find('.L1Cell').attr('catname','Workstation').css('border','3px solid black');
alert('running');
});

Your selector is wrong. You would have to access it like so
firstLevel.find('.L1Cell[catname="Workstation"]').css(...)
You are simply setting every attribute to Workstation and adding .css() . Because .attr() is here to retrieve data from certain attributes and to set certain values for attributes. Not for searching something !
Some documentation on .attr():
http://api.jquery.com/attr/
The right thing you are looking for is an Attribute Selector, documentation goes here:
http://api.jquery.com/attribute-equals-selector/

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?

change this line as:
alert($(this).attr('alt'));

When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();

$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.

Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().