jQuery get an element by its data-id - javascript

Similar to this question here, I'm looking to get an element based on it's data-id.
...
I'm looking to take action on the a tag. It has a shared class amongst many other elements and has no base id, just a data-item-id.
Can the element be found by it's data-item-id or can I only find out what the data-item-id is?

$('[data-item-id="stand-out"]')

You can always use an attribute selector. The selector itself would look something like:
a[data-item-id=stand-out]

This worked for me, in my case I had a button with a data-id attribute:
$("a").data("item-id");
Fiddle

Yes, you can find out element by data attribute.
element = $('a[data-item-id="stand-out"]');

Related

Selecting element with specific class and value

How to select element with class MyClass and value MyValue, but without using each?
I tried something like:
$(".MyClass").find("[value='MyValue']")
$(".MyClass[value='MyValue']")
This is example: http://jsfiddle.net/HQaG5/
It works if i use hard coded value for select element.
You want :contains() :
$( ".MyClass:contains('MyValue')" )
Take a look here: jquery find element by text
You can use the :contains selector to find elements containing text.
But if you want to match an exact string then .filter is the better option
If the element is an input and you want to search after property value you can use .filter()
$('.MyClass').filter(function(){
return this.value=="MyValue";
});
DEMO
If you are looking to get the select box element that has the specified value selected (which seems to be the case based on your fiddle), then you can use this…
$(".MyClass option:selected[value='MyValue']").parent()
DEMO
However, I would question why you want to do this, as it seems kind of backwards.

Call element by id in javascript

I have a repeater and have a label with an icon inside it.
<strong><i id="iconProperties" class="icon-caret-right"></i> Properties</strong>
When i click a button the icon-caret-right must be turned to icon-caret-down. i have written the code as follows:
$('#iconProperties').removeClass('icon-caret-right').addClass('icon-caret-down');
When i use this code only the first row of the repeater is working. all other rows's icons are not changing. What is the mistake?
ASP.net generates unique ids for html elements and only one element can have id iconProperties that you used in selector. You can use Attribute Contains Selector [name*="value"] instead of id selector to get all the matching elements.
$('[id*=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
If your ids have a similar name, you're probably after something like
$('[id^=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
Which will update all items beginning with id "iconProperties".
It might be worth noting that it is common practice to use unique ids.
Try this:
$('#iconProperties').find('.icon-caret-right').replaceWith('.icon-caret-down');

How to get elements with the different value of the same attribute in javascript or jquery?

I need to find elements with the different value of the same attribute...
This works-> $data.find("div[data-alpha='1']");
But i need something like this-> $data.find('div[data-alpha='1']' + 'div[data-alpha='2']' ....
So i want to find all elements which have the ,,data-alpha" atribute 1 or 2.
Anyone have an idea how to do that?
Thanks for all answers! Cheers!
Use the multiple-selector[docs].
$data.find("div[data-alpha='1'], div[data-alpha='2']")
This allows you to accumulate the results of different selectors by joining the selectors with a comma into a single selector.
Try the add() method (http://api.jquery.com/add/).
If you want to find all elements with the data-alpha attribute use
$data.find([data-alpha])
If you need elements with specific values, use:
$data.find([data-alpha=x],[data-alpha=y])

What is the jQuery equivalent to document.forms[0].elements[i].value;?

What is the jquery equivalent to: document.forms[0].elements[i].value;?
I don't know how to travel through a form and its elements in jQuery and would like to know how to do it.
The usual translation is the :input selector:
$("form:first :input").each(function() {
alert($(this).val()); //alerts the value
});
The :first is because your example pulls the first <form>, if there's only one or you want all input elements, just take the :first off. The :input selector works for <input>, <select>, <textarea>...all the elements you typically care about here.
However, if we knew exactly what your goal is, there's probably a very simple way to achieve it. If you can post more info, like the HTML and what values you want to extract (or do something else with).
Well, translated literally, it'd be:
$('form:first *:nth-child(i)').val()
But jQuery makes it easy to grab elements by other manners such as ID or CSS selector. It'd be easier to maintain if you did something like:
$('form#id input.name').val()
$("#formid input").each(function(){
alert($(this).attr("value"))
})
This will give you all elements under the form. Including non form elements:
$("#[form id]").find()
Then you can use an each function to traverse all the children. Or you can use the input selector to only return the form elements:
$("#[form id] :input")
I'm not exactly sure what you're trying to accomplish, but you should be able to do something like this:
$('form:first').children(':first').val();
This will get the value of the first child node within the first <form> tag in the DOM.

Chaining selectors in jQuery

I'm a guy used to mootools' way of chaining selectors, and I can't seem to find anywhere how to do the same in jQuery.
Suppose I have a select element in the selectObj variable. What I need is to get the last option in that select.
In mootools I would have done something like:
var option = $(selectObj).getElement('nth-child(last)')
Can I do something similar, or what is the way of getting that last option in jQuery?
PS. I know about the parent > child selector, but I can't really use it because I don't know what selector has been used to get the select. I only have the resulting element.
$(selectObj).find(':last')
You can use find to perform another query within the current query.
In general, you can check out the Selectors and Traversal pages on jQuery docs when you're trying to figure out how to select something.
var option = $(selectObj).children(":last");
will return the last child of any element
You can also use .last() for this purpose.
jQuery has the :last Selector
$("tr:last").stuff()
Will do stuff to the last row in a table.

Categories