Does jQuery 1.5.1 support attribute selectors in the closest method?
Given the structure below, el represents the checkbox with the value 513, and I'm trying to reach up and check the ancestor checkbox with the value of 0 with
$(el).closest("input[value='0']")[0].checked = true;
but the selector is returning nothing.
Am I missing something silly?
EDIT
Sigh, so the checkbox with value 0 isn't an ancestor to el, just a sibling of the ul ancestor. I got it to work with
$(el).closest("ul").siblings("input[value='0']")[0].checked = true;
But us there a cleaner way to grab it?
The .closest() method does support attribute selectors the same as any other jQuery method (although I don't know about the specific version of jQuery you mentioned), but the problem here is that .closest() doesn't just look in the general vicinity, it goes up through the ancestors. You are trying to select an input element that is not an ancestor of the element you are starting with. (Given that inputs can't contain other elements they will never be the ancestors of anything...)
You should be able to do it by selecting the target checkbox's parent li element first:
$(el).closest('li:has(input[value="0"])')
.find('input[value="0"]').prop("checked",true);
Demo: http://jsfiddle.net/Vpzyj/
Of course if you were able to add a class to the top level menu items you wouldn't need to mess around with ":has", you could just say:
$(el).closest('li.topMenu').find('input[value="0"]').prop("checked",true);
Check for: http://api.jquery.com/closest/
.closest( selector ) // version added: 1.3
I believe that you shouldn't need the [0] as .closest only returns the first element found unlike parents() which returns multiple.
$(el).closest("input[value='0']").prop("checked") = true;
is the way I would prefer to do it.
This is assuming you are trying to check the "value 0" checkbox when you check the check the 513 box.
Edit: Sorry, misread this. In reality you need to try and get the <\li> tag and then get the underlying checkbox. Where you are actually looking for the checkbox which is not a direct parent.
Edit 2: You realize your edit doesn't work right? Wait... it would... you used siblings not children my mistake.
Edit 3: How about using:
$(el).parents().get(':eq(2)').children(':first-child');
or are we not assuming the layout is fixed?
Closest checks up the DOM tree and not on the same level.
Regarding your question: yes, it does (http://api.jquery.com/closest/)
Your code does not work because closest() goes up through the DOM tree and in your case it would have to go up and and down because your checkbox 0 is not an ancestor of checkbox 513.
Related
I use Nightwatch.js to test foreign website code. I used this command:
.waitForElementVisible('input[id="inputField"]', TIMEOUT)
This should wait until the specified element is visible. But I get this warning:
Warn: WaitForElement found 24 elements for selector "input[id="inputField"]". Only the first one will be checked.
I thought the id of a tag is unique. How is it possible to get a list of 24 elements when looking for this id?
What can I do now to select exactly the element I need?
How is it possible to get a list of 24 elements when looking for this id?
Because people constantly fail to understand the basic concept that ids must be unique. Apparently, the site you're testing against was written by one or more of those people.
What can I do now to select exactly the element I need?
According to the documentation, Nightwatch.js lets you use XPath as an alternative to CSS. With XPath, you can specify which of a set of elements to target, e.g.:
.useXpath()
.waitForElementVisible('//input[#id="inputField"][1]', TIMEOUT)
...would use the first, [2] would use the second, etc.
If you can't do it by the index of the element in the document, you'll need to find other things about it you can use to select it (with CSS or XPath).
The id of an element should be unique. However that doesn't take out the ability for a developer to create as many elements with the same id on the page as he wants.
Also, id selectors are usually specified like this input#inputField.
I could now solve the problem by selecting an unambiguous parent element and then selected the child of the child of it; something like this:
div[id="listItem_0"] > span > input[id="inputField"]
I am looking for a correct way to find elements first ancestor to be a child of an element with a specific class.
Using XPath notation I'm looking for (if I didn't botch it):
./ancestor::*[../#class='my_class']
I guess I can run a while(...) loop calling parent() until current elements parent has specified class and go from there, but maybe there is some selector/filter/whatever in jQuery that can be used instead?
If I understood it correctly, you're trying to get the last ancestor when going up, before hitting the ancestor with '.my_class':
$(element).parentsUntil('.my_class').last()
See documentation.
In jquery find a child with specific class :
$("mycontrol").find(".myclass");
find parent with specific class :
$("mycontrol").closest(".myclass"); //return the first parent
Perhaps
jQuery(".my_class").parent().eq(0)
If I have this right.. First parent that is a child of an element with class "my_class":
Find all the elements with class .my-class and get the set of their children, then use .closest()
on your jQuery object, with that set as an argument.
$('myElementSelector').closest($('.my-class').children())
I think that should do it...
I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.
$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')
I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful!
http://jsfiddle.net/jodriscoll/LZA7e/
The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.
This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: http://secure.massgeneral.org/event-form (I'm working with Step 2).
Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.
If all the parent <tr> elements have the classes BBListOddRowStyle or BBListEvenRowStyle you can do this:
$('table[id*="dgRegistrantList"]').find('tr[class*=RowStyle]:last')
.addClass('EventRegLastAttendee')
DEMO
If not, you can use .children() twice to make sure you target the right ones:
$('table[id*="dgRegistrantList"]').children('tbody')
.children('tr:last').addClass('EventRegLastAttendee')
DEMO
Use this code to target the last row:
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList][class$=RowStyle]:last').addClass('EventRegLastAttendee')
Explanation:
tr //it will look for tr
[class^=BBList] //which class starts with BBList
[class$=RowStyle] //and ends with RowStyle (so we're leaving Odd and Even inside and not recognized)
:last //the last of those element, if you remove it you select all of them
Is .children() what you're looking to do?
$('table[id*="dgRegistrantList"]').children('tr:last').addClass('EventRegLastAttendee');
.children() only goes down one dom level, while .find() will go down as far as it can.
Don't use find. It will look at any depth and it may match unintended subtables. Perhaps it will work for your example, but you don't want to be acquiring a bad habit. Plus, find will be more costly than a targeted approach.
You want a more targeted approach:
var targetTd = $('table[id*="dgRegistrantList"]').children('tbody').children('tr:last').find('table:first').children('tbody').children('td:last');
use this code to target parent tr last row
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList]:last').addClass('EventRegLastAttendee');
I am trying to make a basic captcha module for jQuery. I have a decent start on it, but for some reason .children() doesn't seem to work. See it here: http://jsfiddle.net/pTbeW/
I currently have this:
$(this).children('.captchain-start').hide();
$(this).children('.captchain-show').show();
If I change it to
$('.captchain-start').hide();
$('.captchain-show').show();
it works perfectly. But this solution is less than ideal, because it wouldn't allow two instances of this captcha to be on the same page. I suspect it has to do with the html being set by query, but I'm not sure how. I'm far from a javascript and jQuery expert, but this seemed like a relatively easy thing to do. What am I missing? Do I have tired eyes from looking at it so long? Any help would be appreciated.
Because the '.captchain-*' elements are not children, but are siblings. Try the following:
$(this).nextAll('.captchain-start').hide();
$(this).nextAll('.captchain-show').show();
You should use $(this).nextAll() instead of $(this).children() because the elements you want to hide and show are not children of the a element, but siblings.
See http://api.jquery.com/nextAll/
this
In your click event references the clicked element, which is the element with the class 'captchain-start'. So you do not have to scan for the children, you can use:
$(this)
for the actually clicked element or the element selector instead
instead.
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.