Getting id then selecting that element - jQuery - javascript

I'm often finding myself getting various attributes, such as the id of an element or class, then selecting that element and doing something.
What I do now for example is:
var id = $(this).closest(".item").attr('id');
$('#'+id).hide();
Is using '#' and including the id the best way to do this? is there a way to maybe chain these actions together?
Thank you!

If you also want the id at the end, you can chain them like this:
var id = $(this).closest(".item").hide().attr('id');

If you are then going on to manipulate the elements as you do above, a more flexible way would be:
var item = $(this).closest(".item");
item.hide();

Nothing wrong with that method. You might be able to scrunch it into one line, but why?
var id = $(this).closest(".item").hide().attr('id');

Is there a reason why you can't just do
$(this).closest(".item").hide();
Getting the ID and then performing another jQuery selection is going to be slower than this.

You're selecting the item in order to get the id. All you have to do is hide() it there:
$(this).closest(".item").hide()

Just curious as to whether using $(this).closest(".item") without selecting the .attr("id") would work, then just hiding the found closest element. That would save the last line of code, roll it into one line of code. jQuery commands are chainable, so you should just be able to extend your hide command off the same line of code as the .closest() function will return the desired element.
example:
$(this).closest(".item").hide();

I'm not certain if I've understood you correctly, but are you looking for something like this:
$(this).closest(".item").hide();
Here's an example http://jsfiddle.net/alexkey/UtcKk/

Related

Get all children SVG element IDs except specific one using not()

I'm trying to get the IDs of SVG elements except for a specific one being passed to the highlight() function by combining the children() method with the not() method singling out the specific ID.
var allOthers = $(".container").children().not(elem);
I want to affect all other elements' opacity. I tried this way of singling out a specific element ID out of a whole array of them before on some other pr0ject, but I don't know why it says that allOthers is undefined. Am I doing something wrong here?
I made a fiddle.
It is not allOthers which is undefined, it is allOthers.style. You are using vanilla js when you meant to use jQuery, change...
allOthers.style.opacity = "0.1";
for:
allOthers.css("opacity", "0.1");

jQuery Select One Element From Class name

I am in a position where I need to use the .slideToggle() function in jQuery, on a regular JavaScript determined element.
I can use this code:
var feedback = document.getElementsByClassName('feedback');
and then a bit later on in a function:
feedback[index].style.display = 'block';
However, what I want to do is use the slideToggle('fast') function on feedback[index], so instead of so brutally changing its display to block, I get a nice jQuery-esque transition.
Obviously this code won't work:
feedback[index].slideToggle('fast');
However this will:
$('.feedback').slideToggle('fast');
but I can't choose which feedback by index to run the slideToggle() function on, it just does them all, which makes sense.
If I could get some code that effectively does this:
$('.feedback')[index].slideToggle('fast');
That would be perfect. I like the fact that I can stick a class on something and iterate through the list of items that appear in .getElementsByClassName('classname'), so I don't have to stick an ID on everything of the same class, and it would be nice if I could choose which $('.feedback') element I am using in the list of all elements returned by this but I cannot figure out how that would work. If I can somehow choose by index which items in a list by class, to run jQuery commands on it would make this a lot simpler as I do not want to stick an ID on each and every item that has the class of feedback.
Thanks a lot.
Try this : You can use eq() to select element with specific index.
$('.feedback:eq('+index+')').slideToggle('fast');
You can use JQuery like this:
$(feedback[index]).slideToggle('fast');
Here you can see demo

jQuery Locating Element Several Levels Up

I am attempting to locate an input field using the following:
parent = $(this).parent().parent().$('input[type="text"]').attr('id');
However, my script appears to be crashing whenever this runs. Basically, I have a tree of input fields within nested using <ul>'s and <li>'s, and I am trying to access the parent input field of $(this). Any help would be hugely appreciated!
You're probably missing the find function:
parent = $(this).parent().parent().find('input[type="text"]').attr('id');
Maybe this can simplify your code:
parent = $(this).closest('li').find('input[type="text"]').attr('id');
The syntax for your statement is incredibly wrong =D
It sounds like you are looking for the find function:
$(this).parent().parent().find('input[type="text"]').attr('id')
$(this).parent().parent().$('input[type="text"]').attr('id'); is not valid
one possible solution may be
$(this).parent().parent().find('input[type="text"]').attr('id');
parent = $(this).parents('#parentElementID').find('input[type="text"]')[0].id;
Where #parentElementID is the closest parent of the input targeted.

Trying to getElementById from Walmart.com

I am really new to JavaScript, and Im basically trying to build a simple Script to get information from a site like Walmart.com. Im using firebug to test my little snippets. Im having a problem getting the price.
This is the my code:
var price = document.getElementById('clearfix camelPrice');
console.log(price);
I also tried ".camelPrice" with out the period and I keep getting null.
Thanks a lot in advance!
In this case, you're using the wrong method. getElementById does exactly what it says, it gets an element by its id. Looking on Walmart.com, 'camelPrice' is a CSS class.
We can still get elements by a class. What you want is document.getElementsByClassName(). Further, you can pass multiple arguments to getElementsByClassName like so:
document.getElementsByClassName('clearfix', 'camelPrice');
This grabs all elements that have both the clearfix and camelPrice classes set.
In addition to what the others have said about your selection looking like ids, here is how you can select by class name:
document.getElementsByClassName('classname');
Newer browsers allow you to make jQuery-like selections from native JavaScript:
document.querySelectorAll('#id .classname');
http://caniuse.com/queryselector
It looks like you're trying to provide a class selector to getElementById instead of an ID selector. This is what an ID looks like:
<div id="some-id">...</div>
This is what a class looks like:
<div class="some-class">...</div>
The difference is that only one element should ever have a specific ID on a page, where many elements might have the same class.
I am not sure how you are running your JavaScript in Walmart's site, which is not impossible, but maybe you should specify it, for instance if the Walmart site is in an iframe you will not be able to use getElementById() from your site.
On the other hand if you are running some sort of local Live Editor/Console, then maybe it is possible.
For the script you show above, you have an error on the ID since an id can only be one word, and you are missing to select what type of attribute you want from the element:
For example, <input>:
var price = document.getElementById('id').value
or for other tags like <div>:
var price = document.getElementById('id').innerHTML

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