I have...
element = document.elementFromPoint(x, y)
then I want to do something like...
index = $(element).index()
The DOM element is a li and I need its position in the list.
Thanks!
EDIT: If what i'm doing is correct then something here is wrong, Touch events over two dom elements?
Any help is much appreciated.
$(element) will work, if you want to know its position you need to select it's preceding siblings.
jQuery than gives you the length property, wich works like on arrays.
$(element).prevAll().length;
What you want is $('li').index(element);
index()docs allows you to pass a selector or DOM element as a parameter to work similarly to indexOf.
This works: index = $(element).index()
Related
I'm not able to find element from my another jquery element.
Could you please suggest, what I'm doing wrong here?
I have following JS code and I want to find that from total_panels which div has wcPanelTabActive class.
var total_panels = $el.find('.wcPanelTab'),
active_panel = total_panels.find('.wcPanelTabActive');
Chrome console:
You need to use .filter(). As .filter() reduces the set of already matched elements, whereas .find() gets descendants of the matched element.
active_panel = total_panels.filter('.wcPanelTabActive')
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");
I have this event handler from kendo's drag and drop UI and I've assigned it to a variable, lets say e.
I'm trying to select divs that have ID's containing a certain string. I know the syntax for that when continuing from classic jQuery selectors, i.e.
$('select div[id*="whatever"]')
But can I do this off of a variable that contains a DOM element? I know this is a rather simple question but google has thus far been unable to help me.
If you want to filter a preexisting jQuery result, you can go with this:
var $allDivs = $("div"),
$certainDivs = $allDivs.filter("[id*='whatever']");
I believe you might want .find
// returns all DOM elements that
// (1) are descendants of e
// (2) match the selector
e.find("selector");
If e isn't wrapped with jQuery, you might need to do $(e) instead.
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.
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/