We Keep Coding

Selecting a parent class from a child class when there are multiple div's of same parent class

There are four parent div's with same class and all of them have a child with class 'child'. Now the question is, Let's say I click on the First parent div's Child div(First Child) and I want to have some effect on it's parent i.e 'First Parent' to be effected only. Due to being similar class' all parent div's will be effected.
Here's the HTML
<div class="parent"> //First Parent
<div class="child"></div> //First Child
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
Here's the JQuery
$('.child').on('click',function(){
$(this).parent('.parent').css({
'display':'none';
});
});
Clicking on child element will effect all parent div's with class "parent". Either I can give them all separate classes then write onClick() method for all of them but that is not a proper solution.

You can do
$(this).parent().hide();
if you want to hide the parent of the clicked div

Use closest('.class')
$('.child').click(function() {
$(this).closest('.parent').css('display':'none');
});
I Updated my answer !

Your answer is correct and a good practice, I don't see what the issue here is.
The only change you could do $(this).parent('.parent').hide(); instead of using the jQuery css method.

try this code
$(document).ready(function() {
$('.child').click(function() {
$(this).parent().css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">first</div>
</div>
<div class="parent">
<div class="child">second</div>
</div>
<div class="parent">
<div class="child">third</div>
</div>
<div class="parent">
<div class="child">fourth</div>
</div>

$('.child').on('click',function(){
$(this).closest('.parent').css({
'display':'none'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> //First Parent
<div class="child">div 1</div> //First Child
</div>
<div class="parent">
<div class="child">div 2</div>
</div>
<div class="parent">
<div class="child">div 3</div>
</div>
<div class="parent">
<div class="child">div 4</div>
</div>

alterate your JS as follow:
$('.child').on('click',function(){
$(this).parent().css({
'display':'none'
});
});
For me, on click of a div, it hides its parent. Not others.
By the way, you had a ";" after 'none' which is invalid as this is a object, and accepts only either nothing or a comma.
see https://jsfiddle.net/n66sdgdz/

Okay, so lots of answers here with "try this" or other examples.
First off, your code actually works, as you can see here:
Fiddle
However, there was one error in you code. This being the ; at the end of your 'display':'none';
There should be no ; inside a javascript object.

$(document).ready(function() {
$('.child').on('click',function(){
$(this).closest('.parent').css('display','none');
});
});
OR
$('.child').on('click',function(){
$(this).parent('.parent').eq(0).css('display','none');
});
https://jsfiddle.net/t9wxbLs8/

Reposition elements in html with jquery

I can't figure how to achieve this in the best way:
Let's say I have:
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
And I want to move every 'child' right after it's parent.
<div class="parent"></div>
<div class="child"></div>
<div class="parent"></div>
<div class="child"></div>
<div class="parent"></div>
<div class="child"></div>
How can I achieve this?
Update: Also, how can i exclude the parents that have certain attributes? For example, I need to exclude those that have data-anchor=2 and data-anchor=3 I can't figure out how to do this.

$(".parent").each(function(){
$(this).after($(".child", this));
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/onsb12jx/
Note: $(".child", this) is just a shorter version of $(this).find(".child")
Excluding elements can use either .not() or :not() or a filter:
e.g. using .not()
$(".parent").not('[data-anchor=2],[data-anchor=3]').each(function(){
$(this).after($(".child", this));
});
or using :not pseudo selector
$(".parent:not([data-anchor=2],[data-anchor=3])").each(function(){
$(this).after($(".child", this));
});
or using a filter() function
$(".parent").filter(function(){
return $(this).data('anchor') == "2" || $(this).data('anchor') == "3";
}).each(function(){
$(this).after($(".child", this));
});

You can achieve this by looping over the .child elements and using insertAfter() to place them after their closest parent .parent element:
$('.parent .child').each(function() {
$(this).insertAfter($(this).closest('.parent'));
});
Example fiddle

Use
$(".parent").each(function() {
$(this).after($(this).find(".child"));
});
after() will help you to position the element after the selected element

You can use .after(fn) method with a function as an argument to return the desired behavior, a benefit of it is not to use a loop explicitly, This way it will do this for you internally:
$('.parent').after(function() {
return $('.child', this);
});
.parent{border:solid red 3px;}
.child{border:solid 3px green; margin:3px 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">child</div>
parent
</div>
<div class="parent">
<div class="child">child</div>
parent
</div>
<div class="parent">
<div class="child">child</div>
parent
</div>

You can use detach method to do that like so:
$(".parent").each(function() {
$(this).after($(this).find(".child").detach());
});
Here is the JSFiddle demo
You can check the structure by Inspecting element of the age :)

Pass multiple ID's to JS function

My goal in this code is to show specific div tags when the link is clicked and hide all other div tags. I keep rewriting it in different ways but can't seem to get it working properly.
JavaScript below...
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.visibility="visible";
document.getElementById(id2).style.visibility="hidden";
document.getElementById(id3).style.visibility="hidden";
document.getElementById(id4).style.visibility="hidden";
}
HTML below...
Home
Information
Payment
Contact
<div id="home">Content</div>
<div id="info">Content</div>
<div id="payment">Content</div>
<div id="content">Content</div>

Your code is not working properly because you are passing contact in your function instead of content.
Consider using display:none instead of visibility because if you use visibility your content will be hidden but it will leave a space behind:
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.display="block";
document.getElementById(id2).style.display="none";
document.getElementById(id3).style.display="none";
document.getElementById(id4).style.display="none";
}
Home
Information
Payment
Contact
<div id="home">Home Content</div>
<div id="info">Info Content</div>
<div id="payment">Pay Content</div>
<div id="contact">Con Content</div>

If this is your html:
<div id="home" class="singleVisible" onclick="disableOthers(this)">Content #1</div>
<div id="info" class="singleVisible" onclick="disableOthers(this)">Content #2</div>
<div id="payment" class="singleVisible" onclick="disableOthers(this)">Content #3</div>
<div id="content" class="singleVisible" onclick="disableOthers(this)">Content #4</div>
Then this could be your script:
function disableOthers(e) {
var all = document.getElementsByClassName('singleVisible');
for(var i = 0; i < all.length; i++) {
// First make all of the elements with the same class hidden.
if (all[i] !== this) {
all[i].style.visibility = 'hidden';
}
// Then make the clicked element visible.
e.style.visibility = 'visible';
}
}
While I feel that it's important that people learn JavaScript this is the sort of thing that jQuery DOES really help with. The 'onclick' attributes above are not recommended for multiple reasons but if you're going to want to remove those and replace them with actual event handler calls in JavaScript then you ALSO are probably going to want to make sure you support older (IE8, not THAT old) browsers as well. Check this out:
http://www.anujgakhar.com/2013/05/22/cross-browser-event-handling-in-javascript/
In any case, the JQuery version is as simple as removing those onclick attributes and using this script instead:
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
<script>
$('.singleVisible').click(function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Also, note that best practice (if you can) is to have a parent container and attach the event to that instead. Otherwise in both examples I've given you're attaching four event handlers in each case. It's as simple as wrapping the links in a parent div and doing something like this:
<div id="parent">
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
</div>
<script>
$('#parent').on('click', '.singleVisible', function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Have fun! =)

Give all your div elements a class. On click:
hide all of them by using
getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
make the particular div visible by its id
Doing these kind of DOM manipulations is very easy with jQuery.

How to count div's of one class, that are children of container div's of one class?

I would like to count the number of ('.child') in each container and append a sentence with the count inside each container.
<div class='container'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='container'>
<div class='child'></div>
<div class='child'></div>
</div>
How would you do that? Would you need id's or can it be done with just classes?
I want to find a clean way of doing it.
Thanks a lot in advance

$('.container').each(function(i, obj){
var children = $(this).find('.child').length;
$('<p>' + children + ' elements.</p>').appendTo( $(this) );
});

use .length to get count of its source
example...
alert($('.container').children().length);

check this fiddle
You don't need additional thing give the above html structure
$('.container').each(function(){
$(this).prepend('<label> No of children:'
+$(this).find('div.child').size()
+'</label>');
});

Here is a simple example that should handle what you are looking for
jQuery
<script>
$(function(){
$('.container').each(function(){
var count=0,child=$(this).find('.child');
if(child.length>0) {
count++;
child.each(function(){
$(this).text('This is child number '+count);
count++;
});
}
});
});
</script>
HTML
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>

jQuery: If all children have same class

How do I check if all children, or all selectors, have same class?
The class is unknown...
<script>
$(document).ready(function() {
var symbols = $("div:first-child").attr("class");
if ($("div").hasClass(symbols).length == 3) {
console.log("same");
};
});
</script>
<div class="john"></div>
<div class="john"></div>
<div class="john"></div>
This doesn't work... :-/

$("div").not('.john').length
If any of the divs are not class john this will find them, then you check the length and if it's not zero then some exist.
This is a problem:
$("div:first-child").attr("class")
It will return the entire class string, but the div could have more than one class, and all will be returned. But when you check with either my code or hasClass you can only send in one class, not a bunch together.

HTML:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
jQuery:
if ($(".parent").children().length == $(".parent").children(".child").length) {
alert("wooo all the things have teh same class");
}