This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I have the following piece of code in my javascript file(helper.js):
var a = $('li')
$(window).keydown(function(e) {
\\whatever
})
it is supposed to select all tags in my html file and store in in a, however when I use this code, it a is null(which it shouldn't be). when I change my code to:
$(window).keydown(function(e) {
var a = $('li')
\\whatever
})
a is initialized correctly. Does anyone knows why? I am using jquery 3.3.1.
If you are dealing with the DOM (Document Object Model), use $(document).
If you are dealing with how user interact with the window, screen and so on, use $(window)
Here is a link for better understanding window and document
Window vs Dom
Related
This question already has an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 5 years ago.
What is a good equivalent for the jQuery .clone() function in regular DOM JavaScript? I performed multiple searches (on both SO and Bing) and didn't find a specific answer. I need to produce a copy of an element and all of its internal elements. The clone must have all of the elements and content of the source elements. If possible, make the solution as compact or efficient as possible.
try this
var clonedElement = document.getElementById('id').cloneNode(true)
var element= document.getElementById("myid");
var clone= element.cloneNode(true);
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I have looked around and I haven't really been able to find anything that solves my problem. There is a post using buttons but I can't seem to modify it for my needs.
I am trying to use only one event listener for multiple selects. I'd like to return the id of the select, and the value selected but as far as I can figure I either need to use document.getElementById("ID").addEventListener('change',func(),true) for each id or document.getElementsByTagName('select').addEventListener('change', func(), true) and I get an error that says:
selection.addEventListener is not a function. (In 'selection.addEventListener('change', func(), true)', 'selection.addEventListener' is undefined)
I was hoping someone could take a moment and show me where I am going wrong or if I need to use a different method to accomplish my task.
thanks for the help
The method getElementsByTagName returns HTMLCollection of elements, and not a DOM Element, so you can't use addEventListener on that.
What you can do is go over all the elements in the HTMLCollection and add the event you want to them:
let selectElements = document.getElementsByTagName('select');
Array.prototype.forEach.call(selectElements, function(el) {
eladdEventListener('change', func(), true)
})
This question already has answers here:
jQuery hasAttr checking to see if there is an attribute on an element [duplicate]
(9 answers)
Closed 5 years ago.
How do I find a certain attribute exists or not for a selected item in jQuery?
For example, selected element jQuery('.button'), now this can have an attribute 'xyz'. How do I get whether it is having that or not?
You can use the hasAttribute method:
// Attach the event to the button
$('button').on('click', function() {
// This will refer the element from where event has originated
if (this.hasAttribute("style")) {
alert('yes')
} else {
alert('no')
}
})
If you want to use the jQuery library, you can directly use the attr method in the if condition.
if($('#yourElement').attr('someProp')){}
Alternatively, you can also use the jQuery is selector:
if ($(this).is('[style]')) {// rest of the code}
DEMO
You have two solutions that I know of. 1) Native Javascript has a function for this .hasAttribute() (e.g. $(this)[0].hasAttribute('name');). 2) Using jQuery, you can check if $(this).attr('name') is undefined or not.
This question already has answers here:
Performance of jQuery selectors vs local variables
(5 answers)
Closed 7 years ago.
I have a strange question about jquery selector behavior.
First approach:
$('#div').find('#something').html('hahah');
$('#div').find('#something').html('hahah');
$('#div').show();
Second approach:
var $div = $('#div');
$div.find('#something').html('hahah');
$div.find('#something').html('hahah');
$div.show();
I know that it might not have too much difference, but is the second faster than the first?? I've always used the second approach but I'm not sure if there is a difference because I don't know how the jquery selector algorithm works.
The second way is faster/better because you have cached the selector.
Everytime you call $('selector'), the jQuery selector engine(sizzle) is called to locate your desired elements.
However, when you store them in a variable, you do not need to repeatedly call the selector engine as the results are stored.
Note, in your example above, caching can be further improved by storing the find() result as well
var $something = $('#div').find('#something');
$something.html('hahah');
$something.html('hahah');
$something.show();
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery .after() not chain the new element?
This reference code:
$("#id").after(string);
Does a pretty good job inserting the element of the string where its need to.
How can I get a reference to newly inserted HTML element (string)?
var string = '<div id="some_HTML"><span>hello kitty</span></div>';
$jq_elem = $(string); //if it's not a jQuery object, make it one
$("#id").after($jq_elem); //insert into DOM
$jq_elem.css('color', 'red'); //still available
FIDDLE
Try using insertAfter:
var $str = $(string).insertAfter('#id');
This will work if string is HTML.