We Keep Coding

Jquery function when calling CSS & HTML

I am confused regarding the use of ' ' and '.' in a jQuery function.
When exactly do you use one or the other?
For example,
var main = function(){
$('.article').click(function(){
$('.article').removeClass('current')
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
}
)};
$(document).ready(main);
Why is it correct to use .addClass('current') and not .addClass('.current'),
or children('.description') instead of children('description')?
Thank you, I couldn't really find the answer or knew how to look for it on Google.

The . is when you are referring to a Class. Check this for more about classes. So in your case you are using . when you are doing something with the classes. Example $(this).children('.description').show();. Somewhere in your HTML code there is an element with class .description ( example <div class="description"> </div>). And you didn't use . in .addClass() method because you are not referring to existing class but you are "creating" one.
You should also check this to know more about jQuery selectors..

Here is my explanation. There are a couple of different things going on.
This is a typical jQuery pattern:
$(selector).doSomething(parameter);
Whatever is inside $( ) is called the selector. This is an expression that identifies which DOM elements will be selected to apply a function on.
Selectors can have the following format:
'div' or 'a' or ... // selects all the divs or all the anchor tags
'.someclass' // selects all elements that have class 'someclass'
'#someid' // selects all the elements that have id 'someid'
somevariable // a variable that is defined somewhere else (e.g. var somevariable = '.someclass')
The . notation denotes classes. So .description, signifies: Select a class. Which class? The class with the name description.
So much for selectors, now let's look at parameter. A parameter is a variable that you pass to a function. If your function expects a css class, as addClass does, then you pass the name of that class as a parameter. In your case, the name of the class is description.

You would use the prefix . if you are referring to a class, and # if you are referring to an ID.
However, addClass() knows that it is a class, so it does not need the . prefix.

I would like to share my knowledge about your question.
addClass() use to add specific(es) class to current element. It's require class name => You don't need use . before class name.
children() use to get children element, it's require a selector. Selector can be class (.), ID (#) or DOM object (ex div, p, ...).
Read jQuery API documentation for detail
http://api.jquery.com/

jQuery uses CSS selectors to select elements, so when you have a function like children(), you must use a correct css selector, such as '.class-name'. addClass just takes class name as an argument, so 'class-name' is proper one in this case.

Ajax, filter div by id.

I have problem with filter more identic id in the same page.
document.getElementById(val1).innerHTML=xmlhttp.responseText;
I have three the same <div id="name"></div> on one page. And only first div display content. I try with jQuery and filter... but I dont have progress.

The id selector is something to return one unique element (or none if not found). That's why you shouldn't use multiple ids - it will always return [at most] only one (the first).
Fix that fault by using classes or something.
If you really have to get multiple elements with the same id, you can do by using an attribute selector:
$('[id="name"]').html(xmlhttp.responseText);
// or
[].forEach(document.querySelectorAll('[id="name"]'), function(el) {
el.innerHTML = xmlhttp.responseText;
});

document.getElementById
return only first element that having the specified ID. Id should always be unique.
You can try with other attributes like class and then use
document.getElementsByClassName("myClass")
that will return all the elements of given class.

ids should be unique. You shouldn't have two or more elements on the same page with the same id. You can use class names to identify them, and those can definitely be the same. I don't know your code, but try using document.getElementsByClassName (not supported in IE8), or using jQuery to simplify what you are trying to do: $('.my_class_name').html(xmlhttp.responseText)

How to getElementByID in a specific DIV block (JS or JQUery)

I just wanted a fast/easy/simple way to check for existing ID on a specific element (div in this case)..
Can't seem to find code sample for this..im using jquery but i dont think i need to do jquery on this one, just basic getElement.. but i need to isolate the search inside a div block.. because the id does exist in other elements on the page but i need to know if it exist in a specific area/div.
so instead of just
document.getElementById(target_id);
i need something like:
divName.getElementById(target_id);
or
$("document.divName").getElementById(target_id);
or
$(".divName").document.getElementById(target_id);
Can't seem to find something that works.

IDs are supposed to be unique and no two elements in page should have same id. You may search some element with some class in div with specific ID.
$('#divId .someClass')
or using find()
$('#divId').find('.someClass')
or using context, jQuery( selector [, context ] )
$('.someClass', $('#divId'))

var mySubDiv = myParentDiv.querySelector("#mySubDivId")
is equivalent to
var mySubDiv = document.querySelector("#myParentDivId #mySubDivId");
// don't forget the space : #myParentDiv#mySubDivId won't work
where querySelector and querySelectorAll are very useful functions, enough for me to avoid using jQuery : they accept any css selector
in real life, using the same Id for different DOM elements often happens.

id's should be unique, you can check for element using:
$(".your_parent_div").find("div#some_unique_id");

you can use it for the getElementsByTagName or ClassName, but ID is unique over document. so doesn't need to do that. better to use a special ID.
and in every id define as a element in javascript and you can just write id's name and use it, like this :
ID.style.color = red;

According to my understanding on your question, You have used two id's with same name when u execute, It takes only first ID so you are asking to take id from the specific div, well that is bad type of coding to use two id for same name instead go for class if want to use same name.
solution for your question is -this ->
var someDiv = document.getElementsByClassName("divName");
var someId = someDiv[0].getElementById("target_id");

JavaScript String .replace method is replacing all my content?

I have successfully implemented finding and replacing some text with something else in the following way:
$(".class").html($(".class").html().replace(/\text\b/g, '<span class="newclass newclass2">new text</span>'));
When I apply this to my element 'class' it finds all the 'text' and replaces with 'new text' and everything relating to the new classes.
However, if I have more than one element on the page with the same class, it replaces all the classes with whatever text is in the first class.
For example, if my first class has the content "Hello everyone", when the script is applied to this class, it works fine. Any subsequent class of the same name is then replaced with "Hello everyone". These also have the function applied in the same way as the first occurrence of that class.
IE, it applies the script, then replicates this in every single class of the same name on the page.
I do not understand why it would do this, and rather renders the function pointless in many ways if it can't be used to change text throughout different sections without setting up new scripts and different classes.
Hopefully there is something simple at work here that I am not aware of, any help would be much appreciated.
Many thanks
Richard

That is the nature of class selectors--the .html(...) will replace the HTML of everything that matches the .class selector.
If you want to replace text in each individual .class element, you can use the .each function. (There are probably jQuerier ways, too.)
$(`.class`).each(function(n, el) {
var myHtml = $(this).html();
myHtml = mungeIt(myHtml);
$(this).html(myHtml);
});
If you want to select only an individual .class element, then you either (a) don't really want to be using classes, but IDs, or (b) need to understand enough of your structure or the context you wish to operate in to select only the targeted DOM element.
(And hope the structure or context doesn't change without a corresponding code update.)

You're specifying a class with the jQuery selector $(".class") That's what the period indicates. jQuery has a ton of selectors to choose from. A list is provided in the documentation here: http://api.jquery.com/category/selectors/
Also, I'd look at http://api.jquery.com/hasClass/ for your problem as you could then use if...then statements to not run into others

Dave is right about needing to use the .each method. We need to loop through each element at a time because .html() will only return the first element when there are multiple matches.
Try:
$('.class').each(function() {
$(this).html($(this).html().replace(/someWord/g,'withAnother'));
});

Using jQuery to delete all elements with a given id

I have a form with several spans with id="myid". I'd like to be able to remove all elements with this id from the DOM, and I think jQuery is the best way to do it. I figured out how to use the $.remove() method to remove one instance of this id, by simply doing:
$('#myid').remove()
but of course that only removes the first instance of myid. How do I iterate over ALL instances of myid and remove them all? I thought the jQuery $.each() method might be the way, but I can't figure out the syntax to iterate over all instances of myid and remove them all.
If there's a clean way to do this with regular JS (not using jQuery) I'm open to that too. Maybe the problem is that id's are supposed to be unique (i.e. you're not supposed to have multiple elements with id="myid")?

.remove() should remove all of them. I think the problem is that you're using an ID. There's only supposed to be one HTML element with a particular ID on the page, so jQuery is optimizing and not searching for them all. Use a class instead.

All your elements should have a unique IDs, so there should not be more than one element with #myid
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Neverthless, try this:
$("span[id=myid]").remove();

id of DOM element shout be unique. Use class instead (<span class='myclass'>).
To remove all span with this class:
$('.myclass').remove()

if you want to remove all elements with matching ID parts, for example:
<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>
try this:
$("span[id*=myID]").remove();
don't forget the '*' - this will remove them all at once - cheers
Working Demo

The cleanest way to do it is by using html5 selectors api, specifically querySelectorAll().
var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();
The querySelectorAll() function returns an array of dom elements matching a specific id. Once you have assigned the returned array to a var, then you can pass it as an argument to jquery remove().

You should be using a class for multiple elements as an id is meant to be only a single element. To answer your question on the .each() syntax though, this is what it would look like:
$('#myID').each(function() {
$(this).remove();
});
Official jQuery documentation here.

As already said, only one element can have a specific ID. Use classes instead. Here is jQuery-free version to remove the nodes:
var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');
for(var i = spans.length; i--;) {
var span = spans[i];
if(span.className.match(/\btheclass\b/)) {
span.parentNode.removeChild(span);
}
}
getElementsByTagName is the most cross-browser-compatible method that can be used here. getElementsByClassName would be much better, but is not supported by Internet Explorer <= IE 8.
Working Demo