get specific element inside an element with Mootools - javascript

I have a Mootools element which is a HTML LI element. Inside of it, (child of child), somewhere, there is an input element.
How can I find with Mootools, the input element inside of the li element and retrieve it ?
var input = li. ...

You can use var input = li.getElement('input');, that will return the first input it finds. .getElement is kind of the MooTools querySelector before it existed, so it takes a CSS selector.
You might want to use a more specific CSS selector if there are several inputs though.

Related

jquery to vanilla js; each loop of html tags

So this is my current jquery code, which I would like in vanilla js.
var elems = [];
$("*").not('script, style, iframe').each(function() {
elems.push($(this)[0]);
});
the closest alternative I found was
document.getElementsByTagName("*")
but that still has iframe, style, and script tags, which I don't want in my array.
Also, I can't just remove them by their tag name specifically, as they might have an id or a class associated with them.
One option would be to use a CSS selector along with the .querySelectorAll() method.
Since CSS has a :not() pseudo-class, you could use that to negate the script, style, and iframe elements.
var elements = document.querySelectorAll('*:not(script):not(style):not(iframe');
In the snippet above, elements would be a NodeList containing a collection of the selected elements.

Will jQuery select hidden elements

If I call .hide() on an element, will/can jQuery select it in a normal dom selector.
If jQuery does normally select hidden elements, what is the proper way to select only visible elements. Can I use a css selector, or is there a more valid way of doing this?
Yes. The hide function only stores the current value of the display css property of your element, then set it to none. So the dom selectors will not be affected by it unless they try to match elements with a particular display css value.
Check it here.
Have a look at the jQuery hide function documentation.
Yes it will count hidden elements.
Yes, it just adds a display:none style to the element... .remove() on the other hand will not show up in counts. But that completely gets rid of it, and unless you store the value somewhere it is not retrievable.
What I'm assuming you want to do is to count the visible items. I would instead do the following:
$('.element').addClass('hide');
var count_of_visible_items = $('.element:not(".hide")').length;
console.log(count_of_visible_items);

Detect dynamic div elements with getElementById()

So when the code ...
document.getElementById('classhere').childNodes
... runs, I manage to get all elements with that ID EXCEPT for elements that have been dynamically created by a 'createDiv()' function:
function createDiv()
{
var divTag = document.createElement("div");
divTag.id = "classhere" + num;
...
I would like to get all div elements with that Id, even dynamically created div elements. Does anyone have a solution? Thanks!
Try out jQuery
jQuery Wildcard Selector
http://www.emadibrahim.com/2009/07/25/jquery-wildcard-selector/
So when the code ...
document.getElementById('classhere').childNodes
... runs, I manage to get all elements with that ID
getElementById looks up a single element by ID, not by class. That line as quoted will look up an element with the id value "classhere" and return a NodeList of its immediate child nodes (elements, text nodes, etc.). If you create further elements and either don't add them to the DOM, or add them elsewhere (not as immediate children of the "classhere" element), they won't be on the NodeList. It has nothing to do with whether they were created during the main HTML parsing or after-the-fact with JavaScript.
I would like to get all div elements with that Id...
There can be only one element with a given ID.
If you're trying to find all elements whose id starts with "classname", you can use an "attribute starts with selector":
var divs = $("div[id^='classname']");
...gives you a jQuery object containing all of the matching divs as of the time you executed the statement (unlike a NodeList, it's not live; if you change things you'll have to run the selector again).

jQuery: Get one of a set of selected elements

There are several elements that are selected by $(".foo"). $(".foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$(".foo")[0].text() fails.
You want to use .eq(0), like this:
$(".foo").eq(0).text()
When you do $(".foo")[0] or $(".foo").get(0) you're getting the DOM Element, not the jQuery object, .eq() will get the jQuery object, which has the .text() method.
Normally using the # selector syntax selects one element by id attribute value. Do you have more than one element with the same id attribute value? If so, then you need to correct your HTML. id attribute values should be unique within a document.
The items in the jQuery array always return the dom elements (not the jQuery wrapped elements). You could do something like:
$($("#foo")[0]).text()

Remove element by class using parent()

I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.
.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');
Try
$(element).parent().find('.removeThis').remove()

Categories