With jQuery why is document not passed as a string? [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
In jQuery why is document not passed as a string to select it like everything else and is there anything else that isn't passed as a string?
For example if I have an h1 element.
$("document").click(function(){
$("h1").after("<p>lorem ipsum</p>"); //doesn't work
})
$(document).click(function(){
$("h1").after("<p>lorem ipsum</p>"); //works
})

document is a variable in JavaScript (comes from window.document, but window is default scope). Wrapping it with the jQuery Selector transforms it into a jQuery object.
If you use a string then jQuery thinks you gave it a selector. jQuery (or JavaScript actually) tries to find the element in the DOM but there is no such element in the DOM of type "document" hence it fails.

Because document is a property of window and is an Object.
You can check by logging it out console.log(window.document)
The jQuery selector function selects a valid select as a string or a Dom Node Object. $("document") won't work because there is no element called document. $(document) or $(window.document) will work because it is a valid Dom Node.
If first you ran document.createElement('document') to create an element called document then $("document") would work but you would be select the new element and not window.document

Related

Javascipt to hide by class and the name [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I want to hide by the class and the name attribute in div
This wont work
$("div.ind_post").find("[name^='1']").hide();
This work
$("div.ind_post").hide();
$("div").find("[name^='1']").hide();
I wonder why i can hide by the element with class, or the name, but i cannot hide with class and name both.
so my question is how to hide within the class, by a specify name, thanks!
find searches descendants
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should do
$("div.ind_post[name^='1']").hide();
I suspect the reason why $("div").find("[name^='1']").hide(); worked is that you had some div element higher up in the DOM hierarchy
Keeping in mind that name attributes are not allowed on div elements.
find searches the descendants of the selected elements.
If you want an element which matches a class selector and an attribute selector then you need to either search for them together in the first place:
$("div.ind_post[name^='1']")
or filter the collection of matched elements on the extra rule
$("div.ind_post").filter("[name^='1']").hide();

How do I target $0 without getElementById [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');

Equivalent JQuery for Javascript id passing [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I know the javascript to pass id when an event is triggered as below
<td><a id="applyChange_${(loop.index)}" onclick="javascript:applyChange(this);">
function applyChange(obj){
console.log(obj.id;) // this returns the id of the element
}
But how, the same can be written in jQuery?
Add class to your a tags and remove inline event binder
<td><a id="applyChange_${(loop.index)}" class="applyChange">
With this structure you can write Jquery selectors on classes, And on click of any element with the class applyChange you can gets that particular clicked elements id by using $(this).attr('id')
So the script would be like
$('.applyChange').on('click',function(){
console.log($(this).attr('id'));
});
I would do something like this if you just want to get the index:
<a class="applyChange" data-id="${(loop.index)}">
then setup the click event when the page loads (assuming these are dynamically created)
$(document).on('click', '.applyChange', function () { console.log($(this).data('id')) });

Storing a reference to an element dynamically added by append [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have added a new element dynamically through jQuery like this:
var elem = $('#unique').append($('<span>').attr('data-rollNo', i));
Now I need to use this element after this to add something to it. Is there a way I can store a reference to this element here, so I done need to search the entire DOM every time I edit this?
Use appendTo method instead of append:
var $span = $('<span>').attr('data-rollNo', i).appendTo('#unique');
Now, span is appended and you also have a reference to this new object.

Javascript. document.create [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is the if statement saying if placeholder is not in document.create(input)? Why is it using document.create.
<input type="text" placeholder="john Doe">
<input type="email">
<script>
if( !'placeholder' in document.createElement('input'){
// do something
}
</script>
It's seems to be trying to perform feature detection to determine support for placeholder properties on <input> elements, which are new with HTML5.
The document.createElement('input') is used to create an unmodified <input> element for the test. And the in operator tests for the presence of a property on that DOM element.
Though, it doesn't quite achieve what it seems to be trying. The ! will act before the in, so this ends up testing whether such elements have false properties, which they don't.
It'll need another group of parenthesis to ensure that the in is evaluated first so ! can negate its result for the condition.
if (!('placeholder' in document.createElement('input'))) {
// `<input>` elements don't have `placeholder` properties
}
Note: It was also missing the closing ) for the if condition.
What your code would do, if it was syntactically correct, would be to check if the browser has native support for the placeholder attribute introduced with HTML5.
The if-statement create a new input element and then check if the newly created element has a placeholder-property. If it has, then the browser support the placeholder attribute.
A syntactically correct example would be:
if(!('placeholder' in document.createElement('input'))) {
// This browser lack native support for the
// placeholder attribute, do something
}
Example: http://jsfiddle.net/eAy3Y/
Try :
var input = document.createElement("input");
if(!('placeholder' in input)){
input.setAttribute("placeholder", "Your place holder");
}
document.createElement creates a new attribute node, and returns it.
Hope this helps you.

Categories