I'm looking to change the text on span, but I couldn't target by class nor ID, as they have the same classes, the only difference I spot is the parent link href attribute,
Is there a way I can target them?
Although you could select from the actual text (Customers, Products etc) as this is what will be changed it would only work first time and we aren't told whether the change may need to take place more than once.
A more reliable way would be to select on the hrefs and their ultimate strings.
In CSS this can be done using the $ sign. For example:
a[href$="Customers"]
See MDN.
You add more to this to ensure you target only items in that list.
Related
I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.
However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).
Is there a selector to select the visible duplicate ID?
I've tried the following but to no avail:
$('#my_element:visible').val();
As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.
In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.
Since you're using jQuery, I'd highly recommend using classes for this instead.
Avoid duplicates ids on the page. It is not a valid HTML.
as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.
Then you can do
alert($('.my_element:visible').val());
try :hidden
$("#my_element").find(":hidden").val();
Elements can be considered hidden for several reasons:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,
Do not use same id for multiple elements, classes are better!
You can not specify using the # id selector only, you need to be more specific. One way is choose the type of element first then id:
For an input element:
$('input#my_element:visible').val();
or for a div element:
$('div#my_element:visible').val();
An alternative solution to select the element with jQuery and then get value from from the element directly:
$('#my_element:visible')[0].value
I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.
Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');
If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text')
I'm curious as to what the DRYest approach to grabbing an A tag with a certain class is if the A tag is buried within the innerHTML of an element. The innerHTML contains all sorts of divs and other A tags if that's necessary to know. Below is an example of what I'm talking about:
var content = something[0].innerHTML;
// I would want to see whether an A tag with say a certain class "button" exists within "content" then store that A tag in another variable.
Using innerHTML isn’t the best way to do this. Try:
var button = something[0].querySelector('a.button');
button will be null if there’s no match.
See also the docs for querySelector.
I'm trying to further my understanding of traversing and correctly using $(this).
I understand $(this) is used in reference to the context. However, say I have three items that are identical to each other (HTML-wise) and if a user clicks on an input, I want the events to not only happen for the item the user selected, but be able to access the parent element ".item" as well. This way, I can hide other elements within ".item" because, again, the context would be the "input" that the user clicked.
This is where I am confused. When a user clicks on the input ($('input').on('click', doSomething);), I am limited to the context of the input - nothing is inside the input, so I want to access other elements that are out of the input context.
I then try and use $(this) to say I only want THIS event to happen for THIS item only, not affecting ALL items.
Here is a code example: JSFIDDLE
I've tried researching this and I can't find much information on an instance like this so hopefully this could benefit others too. Feel free to make edits to the content / heading as I've tried to be as specific as possible.
To get the immediate parent(s) of the element(s) in a jQuery set: parent. (If your set has only one element, as $(this) will, that will give you that element's immediate parent.)
To find the closest element(s) to the elements(s) in a jQuery set matching a given selector, starting with the current element(s): closest. (If your set has only one element, as $(this) will, that will give you the first element matching a selector starting with that one element, then looking at its parent, then its parent, etc.)
This should be your click-handler code :
function doSomething(event) {
$(event.target).parent().find('ul').hide();
}
I have a table with some radiobuttons in it. When i click on a radiobutton, i want to update two of the sorrounding containers ID attribute (a div and a table). The problem is, i need to go 4 and 6 levels up, and the only way i know how to do this is parent().parent().parent().parent() etc.
I am looking for a better solution, and was hoping someone could point me in the right direction. You can see an image of how the "parent-child" tree is here:
http://imageshack.us/photo/my-images/834/imgkz.png/
I already have a clickhandler etc set up.
Basicly i need to check if the table's id attribute is "answeredTable", if not i need to change it. Also i need to check if the div two levels up from the table is "answered", if not, i need to change that too.
Thanks
You can use .closest('#answeredTable') or .parents('#answeredTable').
Using .parent() only selects the first parent element upon the DOM tree, selecting .closest() will allow you to walk up to DOM tree and match until it finds the element, while .parents() will return the whole parentset of the DOM and match the element in the whole parentset.
You need to use .parents() that go through multiple level of the DOM
For instance, in your example, you could get the surrounding div with this code:
$("#Q_18_2015").parents("div#answered")
By the way, id should be unique, or else, your code might probably not work. You should use classes instead.
<div class="answered">
Thus, the code would become:
$("#Q_18_2015").parents("div.answered")
provided that Q_18_2015 is really a unique id
I think what you want to use is closest http://api.jquery.com/closest/
you can use .parents
$("element").parent(".parentClass")
parents will go up the DOM until finds the parent with class parentClass