why $('#main-content').children('p').html() doesn't work in jQuery - javascript

sorry i am a beginner in jQuery and new in stackoverflow, it is hard for me to tell the differences from those DOM elements.
I want to change the innerHTML in the <p> element, but something strange happened..
For example
html code:
<div id='main-content'>
<p id='p0'>0</p>
<p>0</p>
</div>
js code:
var p=$('#main-content').children('p');
$('#p0').html('100');
p[1].html('100');
I want to change the innerHTML of the first and second element from 0 into 100, but the second method p[1].html('100') doesn't work...and the console said that TypeError: p[1].html is not a function. please help me, Firebug told me that $('#p0') is [object object] and p[1] is [object HTMLParagraphElement], could u explain the differences to me, thank u so much TAT

That's because p[1], just like p.get(1), returns the DOM element.
Use eq to get the jQuery object at index 1 in the set :
p.eq(1).html('100');

jQuery also supports nth-child selectors. So you have that option as well. Fiddle
$("#main-content p:nth-child(2)").text("100");
Like dystroy said, accessing jQuery arrays will return DOM elements. You can use a helper like eq, or simply create another jQuery object by wrapping the DOM element again. So, for example to fix your original code, just do:
var p=$('#main-content').children('p');
$(p[1]).html('100');
Edit: I reread the question, and it seems you want to update content of both paragraph elements. In this case, it becomes even simpler:
$("#main-content p").text("100");
jQuery will act on all selected objects. Please read up on how jQuery uses css selectors

//For First Paragraph with id 'p0';
$('#main-content').find("#p0").html("100");
//For second Paragraph;
$($('#main-content p')[1]).html("100");

Related

Change Class Name of a div in Jquery after find()

I have a brief quesiton about the nautre of jquery.
I tried to change the class name of an element using Jquery by using the argument below.
var classman=$('body').find('div')[2].className('anything')
body has several different divs and I picked the third one by
using .find('div')[2].
When I logged it, .find() argument spits out the whole html line
and I checked the type of it and console says it's "object"
So I was expecting I could access tot he element by typing like
classman.class
but neither the first approach nor the second approach didn't worked out. What should I do to change the second element and the change the class?
Thank you in advance.
I'm not a heavy user of Jquery but Just curious about it and wanted to know how to do it as a basic knowledge.
To add a class in jquery you can do this as follows:
$('body').find('div').addClass('name')
console.log($('body').find('div').attr('class'))
<body>
<div class="test">
</div>
</body>
To get the classes of an element we use attr ('class') in jquery.
In your example you said you wanted to take the second element, to do this use the method eq, (eq. (1))
Example:
$('body').find('div').eq(1) // Get second element

How does jQuery selection work with a variable that hasn't been declared?

Today I found code online like this.
Here's a simplified version of what I don't understand.
<div id="foo"></div>
$(foo) //gets the correct element
How does foo not throw an error and select the right DOM element?
Honestly, I did not know this was possible but it is a feature of javascript. You should read this stackoverflow answer which basically says, do NOT use this feature.
I don't have a detailed explanation but I'll say this. It has nothing to do with jQuery. This is purely a javascript feature.
Run this test to understand. Create an index.html file and then open up the console in developer tools. Type out the id name on the element and javascript will print out the javascript.
index.html
<html>
<body>
<div id="foo"></div>
</body>
</html>
In the console log, write out foo and click enter. Chrome console should print out <div id="foo"></div>.
In your example, you should fix the typos so you get a clearer understanding. I may not be using the official jQuery verbiage here, you should read the docs, but this should make some sense of the example.
These are not variables, they are jQuery objects.
The javascript elements like $( '#overlay' ) are calls to the jQuery function with a selector which can be the same as a CSS selector. The return value is a jQuery object, and jQuery's method .addClass() is being invoked right away on the returned object.
In your example, the selectors are ids, but tag names, classes and pseudo classes work too, and you can even wrap javascript references to DOM elements in $( ... ) to use jQuery functions. jQuery returns an object that includes many member functions, not just the .addClass() method shown here, and some selectors will return a collection not just a single item. For instance, $( 'a' ) returns a jQuery object with a reference to every link on the page.

Why is Inspecting the DOM element showing something diff than using jQuery ID selector in console?

I'm working on displaying a graphic on a website. For some reason, when I inspect the element I see this:
<div id="canvas-daily" style="position:relative;" ng-if="currentMode == 'day'" class="ng-scope"><div class="circle-background"></div></div>
But when I do document.getElementById("canvas-daily") in my console I get a svg graphic inside the parent (canvas-daily) ID div. Why would this be happening and how can I fix/hack into this to append the content that is obviously there?
Edit - this answer has been rendered obsolete by edits the OP made to their question. It has not been deleted yet because of the conversation happening in comments.
To find the DOM element shown in the HTML in your question, you would just use this:
document.getElementById("canvas-daily")
Do NOT include the # in the string you pass to document.getElementById(). That is only used with more generic functions that accept CSS selectors like document.querySelectorAll(). document.getElementById() just takes a plain string that matches the ID you are looking for.

Selecting the individuals from a group of jQuery elements

If I use jquery to select all my text inputs:
var inputs = $('#form input[type="text"]');
They are wrapped in jQuery. I can do whatever I want with them.
inputs.css('height', '1000px');
//muhahaha!
As a group they abide. But I seem to be missing something. I know I can see each one individually as if it was an array of objects.
console.log(inputs[0]);
// <input type="text" />
But the above output is just the html; when I do that it's no longer a jQuery object :(
inputs[0].css('font-size', '100px');
// Uncaught TypeError: Object #<HTMLInputElement> has no method 'css'
How do I continue to use jquery's methods on the individual without having to wrap each element again, or is this not possible for some strange, dark, inexplicable reason?
Didn't even know where to begin searching this one, and my jQuery journey has not lead me to the answer thus far. Thanks!
Have a look at this page: jQuery Filtering
inputs.eq(0).css('font-size', '100px');
Should do the trick in this case
see this function .eq() in Jquery-API
When access the Dom-Node-Collection in JQuery via Array-Index, you get the RAW Dom-Elements, if you select the index with the given method above, you'll get feature-enhanced jQuery-Wrapped-Elements.
See docs.
The only way to avoid wrapping each element again($(inputs[0]).css('font-size', '100px'))
would be using pure JavaScript. Example: inputs[0].style.fontSize = "100px";

Get a jQuery element for a DOMElement

I know how to do the opposite. Getting a certain DOMElement for a jQuery element is easy. (Use the get() method)
But how can you get a jQuery element for a specific DOMElement?
Unfortunately this DOMElement does not have any attributes like class or id so constructing a selector is not really an option.
Lets say I have this html:
<div class="edit">Abcd<b><i><u>asdasd</u>adasda</i></b>sdfsdf<br>asd</div>
I am in the u-DomElement. How can I get this as a jQuery element?
Is there a smart way to do this?
EDIT:
I wanted to know if there is a gerneral way to do this. Not specific to the code shown above.
Like:
DomElement.toJQuery()
Is there anything like that? I am aware that this might not be possible.
Getting a jQuery object for a DOM object is as simple as jQuery(dom_node) (or $(dom_node)). See http://api.jquery.com/jQuery/
This is commonly used in event handlers, which are given the DOM node as this, so that you will often see $(this)
If you want to get just the Element use the below code. if you wanted to get the HTML of any element you might want to add the .html() tag to either of the examples
var myVar = $('.edit u');
or
var myVar = $(".edit").find("u");
Are you looking for this?
$(".edit").find("u");
hope this is what you are looking for,
$(DomElement)
you want a only 1 specific dom element i suggest you find a way to add an id to that element.
but to get an u element inside a edit class:
$('.edit u');
$('.edit').find('u');

Categories

Resources