How to get the element that was used as event selector - javascript

I got the following problem.
I got an div with is filled with different elements and that has a mouserover-event. I need to use the div in the mouseover-function. The Problem is that i can't select the div via it's class because there are many automaticaly created divs with the same class.
I have tryed to use event.targetbut it returns the object that is inside the that that was used as selector.
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + event.target.className);
});
.inner{
background-color:#ccc;
min-width:100px;
width:100%;
min-height:100px;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
<div class="inner">
here
</div>
</div>
Is there any way to get the div outer on mouseover without selecting it by it's class?
I also can't just use $(event.target).parent() because there can be deeper nested structures inside the outer div that are dynamically created

The way I understood the question is you really want to use mouseover event on the .inner div(s). With the example you provided, what would happen if .outer div had padding for example? The event would still trigger even though we are not hovering over .inner div at all. So I would change the event attaching a little and use jQuerys .closest-method to travel back up to the parent div:
var $container = $(".outer");
$container.on("mouseover", ".inner", function(event) {
console.log($(this).closest(".outer").attr("class"));
// or since in this case you know it's the same element:
// console.log($container.attr("class"));
});
.outer {
padding-top: 30px;
background: Red;
}
.inner {
background-color: #ccc;
min-width: 100px;
width: 100%;
min-height: 100px;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
here
</div>
<div class="inner">
here 2
</div>
</div>

Hope, this would work for you:
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + $(event.target).parent().attr('class'));
});
.inner{
background-color:#ccc;
min-width:100px;
width:100%;
min-height:100px;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
<div class="inner">
here
</div>
</div>

Use this instade of event.target
this trigger current selector.
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + this.className);
});

Like this?
I don't understant why you can't use parent
Well, you can get the current listener object just by using "this"
$(".outer").on("mouseover", function(event){
var obj = $(this);
console.log(obj.hasClass("outer"))
});
.inner{
background-color:#ccc;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
here
</div>
</div>
<div class="outer">
<div class="inner">
<div>
<div>
<div>
<div class="someclass">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
deeeeeeeep inside
</div>
</div>
</div>
</div>
</div>
there
</div>
</div>

Have you tried event.currentTarget
Example: http://codepen.io/camtullos/pen/bgQNoa?editors=1111
$(".outer").on("mouseover",function(event){
console.log(event.currentTarget.className);
});

Related

jquery remove div inside of other divs

I have a main <div> with many other divs inside like this:
[HTML]
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
I want to remove the div with class name "deleteMe", i tried to remove it by using ,find() method from jquery:
$('.container').find('.row').find('.col').find('deleteMe').remove();
or
$('.container').find('.row').find('.col').removeClass('.deleteMe');
But didn't work, what is the best way to remove it?
here is the fiddle link test this exemple:
fiddle
//$('.container').find('.row').find('.col').find('deleteMe').remove();
$('.container').find('.row').find('.col').removeClass('.deleteMe');
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.deleteMe {
border: solid 1px #6c757d;
padding: 10px;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="deleteMe">
delete me
</div>
</div>
</div>
</div>
You do not need jquery for the job, see the following code snippet ( The setTimeout wrapper delays the deletion by 1s and only serves to see what is happening.
setTimeout ( () => {
document.querySelector(".deleteMe").remove();
}, 1000);
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
Given your original code, you might want the selector to be more specific:
document.querySelector(".container > .row > .col > .deleteMe").remove(); // Adjacent sub-selectors reference elements in a parent/child relation
document.querySelector(".container .row .col .deleteMe").remove(); // The elements are in a ancestor/descendant relation, not necessarily child/parent
Try this
$(".container .deleteMe").remove();
below line will do
$( ".container .row .col .deleteMe" ).remove();
There is a little typo in your code: a . is missing before deleteMe.
$('.container').find('.row').find('.col').find('.deleteMe').remove();
correctly.
Another thing: removeClass don't remove an element with the specified class; It removes the specified class from the element.

How I hide a div when jquery show another div?

I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !

Click event and for loop

HTML code:
<div class="test" id="inner1">
ONE
</div>
<div class="test" id="inner2">
TWO
</div>
<div class="test" id="inner3">
THREE
</div>
<div class="test1" id="outer1">
ONE
</div>
<div class="test1" id="outer2">
TWO
</div>
<div class="test1" id="outer3">
THREE
</div>
Javascript code:
<script type="text/javascript">
for (var i=1;i<=3;i++)
{
$("#inner"+i).click(function () {
$("#outer"+i).css("background-color","blue")
});
}
</script>
and the CSS:
.test{
width: 100px;
padding: 10px;
background-color: green;
margin-bottom:10px;
cursor:pointer;
}
.test1{
width: 100px;
padding: 10px;
background-color: red;
margin-bottom:10px;
}
What I want is to change background color of outer1 by clicking on inner1, change background color of outer2 by clicking on inner2 and change background color of outer3 by clicking on inner3. The above code does not work since it looks for outer4 (i=4) which does not exist when event click is triggered... Do you have any idea how to implement the above with some kind of loop?
Thank you
http://jsfiddle.net/Lpwmyspo/1/
When you iterate like that, the i inside the click function isn't evaluated until you actually click something, and at that time the loop has finished and the value of i is the last thing it was set to in the loop.
The real question is why you're using a loop to begin with when you can use the attribute-starts-with selector and this instead
$('[id^="inner"]').on('click', function () {
$('#outer' + this.id.slice(-1)).css("background-color","blue");
});
FIDDLE
How about?
$(".test").on("click", function() {
var which = this.id.replace(/^inner/, "outer");
$(".test1").css("background-color","transparent"); // in case you need to reset the background
$("#" + which).css("background-color","blue");
});
Demo#Fiddle
Do it in the following way:
<div class="test" id="inner1" onclick="abc(this)">
ONE
</div>
<div class="test" id="inner2" onclick="abc(this)">
TWO
</div>
<div class="test" id="inner3" onclick="abc(this)">
THREE
</div>
<div class="test1" id="outer1">
ONE
</div>
<div class="test1" id="outer2">
TWO
</div>
<div class="test1" id="outer3">
THREE
</div>
and the JavaScript part as follows:
<script type="text/javascript">
function abc(e){
var id = e.id;
var lastchar = id.substr(id.length -1);
document.getElementById("outer"+lastchar).style.backgroundColor='blue';
}
</script>

How to get the text value from divs with same class, and to display in another div?

Example here: http://codepen.io/agentmi6/pen/JoZZWm
how can i display the text of the green div in the grey div, when i click on the [+] icon? Ive tried many different scenarios but none works, can someone give me few pointers how can i do this, i would really appreciate.
<div id="wrapper">
<div class="container">
<div class="first" id="f">
<div class="set">+</div>
this is the 1st element
</div>
<div class="first" id="s">
<div class="set">+</div>
this is the 2nd element
</div>
<div class="first" id="t">
<div class="set">+</div>
this is the 3rd element
</div>
</div>
<div id="cc"></div>
</div>
CSS
.first{
margin-top:5px;
border:1px solid black;
width:190px;
height:40px;
background-color:green;
}
#cc{
margin-top:5px;
width:190px;
height:40px;
border:1px solid black;
background-color:grey;
}
.set{
cursor:pointer;
color:#fff;
font-size:33px;
float:right;
border:1px solid white;
}
You'll have to get the text of the .first div, i suggest you put the text into a tag so it'll be easy to get it, and so you don't get the + of the .get button.
Here's the new JavaScript
$(document).ready(function(){
$('.set').click(function(){
// Get the text inside the span in the parent .first of the clicked .set button
var text = $(this).parent('.first').find('span').text();
$('#cc').text(text);
});
});
The HTML would look like this
<div class="container">
<div class="first" id="f">
<div class="set">+</div>
<span>this is the 1st element</span>
</div>
<div class="first" id="s">
<div class="set">+</div>
<span>this is the 2nd element</span>
</div>
<div class="first" id="t">
<div class="set">+</div>
<span>this is the 3rd element</span>
</div>
</div>
<div id="cc"></div>
Here's an updated CodePen
You can use this:
$(document).ready(function(){
$('.set').click(function(){
var text = $(this).parents("div.first").text();
$("#cc").text(text);
})
});
This Code could help you
var tempText="";
$('.container .set').each(function(){
tempText=tempText+ $(this).html();
});
$('#cc').html(tempText);
Here try this (fiddle: http://jsfiddle.net/nek9fona/)
JQ:
$(function(){
$('.set').click(function(){
var $this = $(this);
var text = $this.parent('.first').text();
$('#cc').text(text);
});
});
Put this in your head html section. Or bottom of body section.
<script>
$(document).ready(function() {
$('.set').on('click', function(){
var text_val = $(this).closest('div.first').text();
$('#cc').text(text_val);
});
});
</script>
I guess that you don't want the copied text to contain "+" symbol? In this case you can do this:
$('.set').click(function() {
var text = $(this.nextSibling).text().trim();
$('#cc').text(text);
});
Demo: http://codepen.io/anon/pen/MYXXrr
Note, that it makes sense to improve HTML structure a little by wrapping the text into some container:
<div class="first" id="s">
<div class="set">+</div>
<div class="text">this is the 2nd element</div>
</div>
In this case, code would become much more reliable and cleaner:
$('.set').click(function() {
var text = $(this).next('.text').text(); // or $(this).parent().find('.text')
$('#cc').text(text);
});
Demo: http://codepen.io/anon/pen/ogyyoO

Add icons inside textbox area onfocus event, using bootstrap and javascript

Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>

Categories