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.
Related
I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.
Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');
Use .text method using button selector
$("button").text('Text changed..');
$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$
$('button').text('some text');
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"]');
I have an element which I'd like to give a data attribute which contains a series of values, i.e., an Array. Then I'd like to be able to select it based on any of the values in that series. Something like this:
<div id="example" data-my-series='["foo", "bar"]'></div>
Then I was hoping to select it based on the fact that it has "foo" in it. I'm not really sure how I'd go about it, though. I know I'd do $('div[data-my-series="foo"]') if I wasn't taking this approach, but, obviously that's not the case. Any suggestions?
Edit: Also, how can I achieve the inverse of this? i.e., select an element which does not have "foo" in its data-my-series?
$( "[data-my-series*='foo']" )
Here ya go!
The simplest way is very similar to what you are doing, just use the Attribute Contains Selector instead of the equals selector: $('div[data-my-series*="foo"]')
You can see more about it here:
http://api.jquery.com/attribute-contains-selector/
Edit:
To answer the comment below, you can layer selectors in jQuery so take a look at the ":not()" selector. The usage would be $('div:not([data-my-series*="foo"])').
Make sure you don't put the div inside the :not. Also you will probably want to add [data-my-series] outside the :not as well to make sure you only select divs that have that data attribute.
Final product:
$('div[data-my-series]:not([data-my-series*="foo"])')
Watch out. The accepted answer will do substring matching and probably result in matches you didn't intend.
$('[data-my-series*="foo"]') will not just find <div data-my-series="foo"> but will also include <div data-my-series="foobar"> in the results
You should use ~ instead of * to do whole-word matching $('[data-my-series~="foo"]'). This will result in matching foo but not foobar
If you want multiple words in the data string, use spaces to separate them:
http://api.jquery.com/attribute-contains-word-selector/
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.
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.