We Keep Coding

How can i click and just own class can be shown on Javascript

<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
$(".class1").hide();
$(".item").click(function () {
$(".class1").show();
})
I want that when the user click div of item, its own class1 should be show();
But in my codes, when the user click item of div, all class1 shows.
How can i do that just own class can be shown?

To fix this you need to use DOM traversal to access the .class1 element(s) within the clicked .item. To do that you can use the this keyword within the event handler to access the element which raised the event. Try this:
$(".item").click(function() {
$(this).find(".class1").show();
})
.class1 { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item text-center">
Foo
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
Bar
<div class="class1">
<p> Something </p>
</div>
</div>
Note in the example that I used CSS to hide the .class1 elements instead of JS. This is because JS runs after the DOM has loaded, so can result in elements being visible for a short time before they are hidden. CSS runs before this, so avoids that occurrence.

$(".class1").hide();
$(".item").click(function () {
$(this).find(".class1").show();
});
<!--The parent divs should not be empty, otherwise when later in the code you call the .hide () method on their respective child divs, there would be nothing left to click on-->
<div class="item text-center">
item1
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
item2
<div class="class1">
<p> Something </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use the find () method, the find () method returns the descendant elements of the selected element. Like the code above

How do I add css property for particular Div if class is found(JQuery)

<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
This is a piece of code in which I want to add css properties to div with class "b" if <p> contains class="ABC".
How to do it?

$("p.ABC").parents("div.b").css('background-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
$("p.ABC") this finds all the p elements has the class ABC.
parents("div.b") finds the first parent that is div and has class named b of the selected element.
css() adds the styles you want. You can also use addClass() method to add predefined class.

Please check if this helps
if($( "p" ).hasClass( "ABC" )) {
// if you want to add a class with many properties, then
$( "div.b" ).addClass( "yourClass" );
// if you want to add one property to existing class then the below statement
$( "div.b" ).css( "attribute-name", value );
}
You can add all the css properties in "yourClass"
if($("p").hasClass("ABC")) {
$("div.b").css("color", "blue");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
Please check the code snippet.
I added a css property color as blue to the class 'b' if 'p' has 'ABC'. its working

One method is to look directly at <p class="ABC"> and check if it has a class using hasClass(). Then you can traverse upwards to find the nearest element with class="b"
Something like this:
var elementToModify = $('p').hasClass('ABC').closest('.b');
elementToModify.prop('property', newValue);
Checkout these to further understand their use:
prop()
closest()

You can use $("p.ABC") to find all <p> with class ABC then .closest(".b") to find the parent div with class b then .css() to change css properties.
I recommend using .addClass() / .removeClass() rather than change css directly, but this helps you find the parent.
This also allows you to have multiple div class='b' in your html and it will only apply to the one with ABC
$("p.ABC").closest(".b").css("background-color", "pink");
.b+.b {
border-top: 1px solid black;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="DEF">ABC not present</p>
</div>
</div>
You can also turn it around using :has
$(".b:has(.ABC)").css("background-color", "pink")
which states: select all .b that has at least one child that has class .ABC, which is nearer to your concept of: add css to div with class "b" if <p> contains class="ABC"
So it depends on which way you want to work it.
$(".b:has(.ABC)").css("background-color", "pink")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="DEF">ABC not present</p>
</div>
</div>

Find ID of HTML element which called JavaScript function

I have a three button navigation panel, comprising of three divs and an anchor. On mouse over, myFunction() assigns a class to the three divs and anchor tag, for styling purposes.
<nav>
<div id="btn1" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
<div id="btn3" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
<div id="btn2" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
</nav>
What I need to do is find the ID of the div which called myFunction(), so I can make a change within the function to only the calling div, not all three.
Using JavaScript only, how can I go about doing this.
Thanks in advance.

There is two ways you can do is
1) Send an argument to the method with the div's name
Example
<div id="btn1" class="button" onMouseOver="myFunction('btn1')">
2) Send the element this
Example
<div id="btn1" class="button" onMouseOver="myFunction(this)">
In the javascript you can then do
myFunction(element) {
//element is now the element you clicked on
}

You can use the event object and look at the target (e.target). This is a reference to the element itself so to get the ID you would simply access the element's id property. (e.target.id)
document.querySelectorAll('.a').forEach(function(ele, ind) {
ele.addEventListener("mouseover", function(e) {
console.log(e.target, e.target.id);
})
});
.a {
height: 40px;
width: 40px;
border: solid black 3px;
margin-top: 5px;
}
<div class="a" id="one"></div>
<div class="a" id="two"></div>
<div class="a" id="three"></div>

You can call this.event.target from myFunction() to determine which element generated the event.
For example:
myFunction() {
console.log("I was called by: ", this.event.target);
}

How to add a class to element if another element is empty?

I am trying to remove the existing class (blue) and add a new class (red) to the <'h2'> when the <'a'> is empty.
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>
<style>
.blue{color:blue}
.red{color:red}
</style>
I have tried a few variations but without success. This is my latest.
$("#heading a.info:empty").removeClass('blue').addClass("red");
Any help on this would be appreciated.

Use .text() to find if it is empty
var a =$(".info").text().trim();
a===""?($("#title").removeClass("blue").addClass('red')):''
JSFIDDLE

if($("#heading a.info").text() === ''){
$("#heading h2").removeClass('blue').addClass("red");
}
.blue{color:blue}
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>

if ($("#heading a.info:empty")) {
$("#title").removeClass('blue').addClass("red");
}
.blue {
color: blue
}
.red {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>
Should remove from h2 not from anchor

:empty returns a collection of elements. And you need to add/remove class from h2,
so use .prev() to get the previous sibling.
$("#heading a.info:empty")
.prev('#title')
.removeClass('blue')
.addClass("red");

Add class to last div when it exists

I have the following HTML structure, I want to add a class to the last <div> which contains the <p> tag but only when it exists.
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
Any suggestions?

Simple snippet:
if($('#view div:last p').​​​​​​​​​​​length)
$('#view div:last').addClass('myClass');​​​​​​​​​​​

Will get all the divs that has a p tag
p = $('#view div p');
if (p.length) {
$(p[p.length - 1]).addClass("largerText");
}​
Here is the fiddle

Yes Roaster given right answer and this is the fiddle for it. http://jsfiddle.net/sameerast/qhsXM/
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>​
if($('#view div:last p').length){
$('#view div:last').addClass('myClass');
}
​
.myClass {
border:red 1px solid;
}​