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

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

Related

Using filter() to filter jquery based on parents

I see on jquery documentation that I can use .parent() to filter my matched elements based on the parent. But in the process, the final result I get is the set of parent elements, not the original set of elements. So I see that I can use filter to achieve what I want. But I found so few documentation about how to use filter to filter based on the parent.
For example, my html is:
<div id="social">
Facebook<br/>
Twitter<br/>
</div>
<div id="topsites">
Facebook<br/>
Stack Overflow<br/>
</div>
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
I suspect the code will be something like this:
$('a[href*="facebook"]').filter( ... ).click(function() {
});
But I have absolutely no idea what to put on the filter. "parent#social" ?
Another way to put it is to use filter function.
$('a[href*="facebook"]').filter(function(index) {
return ...
}
.click(function() {
});
I also don't know what code to put on the ... . Is it something like this.parent.id == "social" ? If possible, I prefer the first form, but if the solution can only be achieved by using the second form (filter function) then it's okay. Thank you very much.
.parent() doesn't filter, it traverses. It takes a jQuery object, that lists an array (of size [0, n) ), and generates a new jQuery object with each element's parent.
Getting a jQuery object with the list you're looking for is much simpler though...
CSS Selectors, which jQuery is based upon (with various extensions) are heirarchical by nature. That means selecting specific children of some parent(s) is quite trivial. a CSS selector to pick the element you want is:
#social a[href*="facebook"]
and if you use this inside a jQuery constructor, you'll get you object:
$('#social a[href*="facebook"]')
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
No need of filter here,
$('#social a[href*="facebook"]')
will do.

How to make "val()" work in html form?

I have an online order form which works great! the only thing thats wrong is that i cant seem to find a way to send the input data from the text fields with Naam:, Adres: etc. (which is at the bottom of the code) i found out that i could use this code : $("#txt_name").val(); but it does not work properly. And i don't really know in which function i have to pace de code. Can someone help me? i'm not very experienced with jquery.
working website
javascript without the html
In your code you have the following
$(".txt_name").val();
You are using . as a class selector, you should use
$("#txt_name").val();
With # as an id selector
The first one gives you an array because you are selecting multiple elements and the second one gives you an element. I testet it in the browser console and it returns the value of the #txt_name Naam, but the first one returns undefined since .txt_name does not exist.
The same applies to the other fields, give them and id and you can get their values the same way.
$("#txt_name").val() should return a string which you can store in a variable of pass to a function.
if you want it to return something usefull "#txt_name" must be an input element or an element with a value attribute.
lets say you have a test inpu tag with the id="txt_name" if a user writes something that elements value attribue will be that text, even if you dont see it on the tag itself.
so $("#txt_name").val() will return the value of the value attribute of the htmlElement.

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

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");

Find the child of the element represented by "this" that has a certain class

I know how to accomplish this if I can identify this element using a selector:
$("selector.class")
But what if my selector is the keyword this? Obviously $(this".class") isn't going to work, and I don't want to use $(this).children(".class") because then I need to extract the HTML of the element using .html(), and while I know that there will only be one element of this class in the selected element (I'm writing the HTML), JQuery doesn't, and it assumes that children() returns several elements when used with a class (at lease I think that's what it does, because
$(this).children(".class").html()
returns undefined).
Is there an other way I could do this?
Please feel free to ask for clarification, I understand this may not seem clear to some.
EDIT: some of you asked for clarification, so here it is. Let me rephrase the question: normally, when I ask JQuery to get me some elements, and give it a class as a selector it assumes I will get more than one element back and therefore $(".selector").html() doesn't work, because you can't get the HTML of several elements (at least that's my theory). Instead, I want it to recognise that in this case I am only getting 1 element back, and treat is as such. My restriction is that part of my selector is this. I hope that helped!
It isn't entirely clear to me what question you're asking so here are several different options:
To search for any subordinate tags (in the DOM tree with this as its root) that match a desired selector:
$(this).find(".myClass");
Or, if you're just trying to see if the this element has a particular class name, you can use:
if ($(this).hasClass("myClass")) {
// this element has the desired class
}
or, if the selector is more complicated than just a class, you can use .is() like this:
if ($(this).is("selector")) {
// this element matches desired selector
}
Really this isn't a selector, but I think you can do:
$(".class", this)
This is an example of supplying the context argument to the jQuery ($) function
For example (jsfiddle here),
HTML:
<div id="dis">hello
<div class="cls">
hi</div></div>
<div class="cls">
goodbye</div>
jQuery:
$(function () {
$('#dis').click(function () {
alert(
$('.cls', this).html());
});
});
will alert "hi" when the "dis" div is clicked.
Jquery is just a layer on top of JavaScript.
Just use raw javascript to get what you're looking for.
var childOfThis = this.querySelector('.myClass');

How do I use jQuery to generate a paragraph with ID 'blurb' in a div?

I have a div element on my web page with ID "map" with a link to Google inside of it.
<div id="map">
Google
</div>
I want to use jQuery to generate a paragraph after the link with an ID of "blurb," so the HTML akin to what the Javascript produces is
<div id="map">
Google
<p id="blurb"></p>
</div>
I have been experimenting with
$('#map').append('p').attr('id', 'blurb');
to no avail.
I am open to a Javascript, but non-jQuery way to do this as well. Thank you!
This should work:
$('#map').append('<p id="blurb"></p>');
Your method was the right general idea, but was just appending the text 'p' rather than the tag <p> and the id wasn't getting set on the right object because of the way jQuery chaining works for .append().
If you wanted to assign the id programmatically for some reason, then it's probably easier to do that this way:
$('<p>').attr('id', 'blurb').appendTo('#map');
First, set up all attributes, then append.
$('<p>').attr('id', 'blurb').appendTo('#map');
Your code doesn't work for two reasons. First of all append can take text and you must distinguish between text and HTML by using a tag (<p>) instead of p. The other reason is that chaining means jQuery's append function will return the jQuery object that it is called on. In this case an object refering to your map element. So when you set the id you were setting the id of the map div, not of your newly create element (assuming the <p> error was fixed). Also you should use prop to set the id instead of attr, but both will probably work for id. Here is some example code:
jQuery:
$('<p>').appendTo('#map').prop('id', 'blurb');
Plain Javascript (Faster, but less legible):
var pel = document.createElement('p');
pel.id = 'blurb';
document.getElementById('map').appendChild(pel);

Categories

Resources