I want to extract the text of the div on hover but so far I getting the text of all the divs.
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I tried using the following command :
$('.a').on('hover').text();
Any suggestions?
To get the first div only, target a:first then get the text of that element using this
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
Try this code
$('.a:first').on('mouseenter', function() {
alert( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
You can use the below code to get the text of the hovered div.
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
Related
I want to remove all div elements with class facebook, twitter, LinkedIn, googlePlus who has parent id show-share-count
How to do this?
$("div").remove(".facebook");
$("div").remove(".twitter");
$("div").remove(".linkedIn");
$("div").remove(".googlePlus");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
you can do this just only one line in script section.
<script>
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus").remove();
</script>
Just use following script for this
$('#show-share-count .facebook, #show-share-count .twitter, #show-share-count .linkedIn, #show-share-count .googlePlus, #show-share-count .share-count').remove();
or you can use .children()..
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove();
Do like this .children() .They will find the children element of the show-share-count
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
This is how you can do it:
$("button").click(function() {
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus, .share-count").remove();
});
Here is the JSFiddle demo
You can try to use .empty from Jquery if you want to empty the whole div
https://api.jquery.com/empty/
or
$("#show-share-count .facebook").remove()
if you want to remove a specific div
You can use below also:
$('#show-share-count .facebook,.twitter,.linkedIn,.googlePlus,.share-count').remove();
I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!
You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});
I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>
For the life of me I can't figure out how to access the first div with text "I want this one" starting with the id of div1
My attempt:
$("#div1").first().first().html();
Here is an example
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
</div>
Try this
1.
$("#div1 .another:first").html();
2.
$("#div1 .another").first().html();
3.
$("#div1 .another").eq(0).html();
Example
If you literally want the first element within the first element, you can do it in one selector using pure javascript selectors for performance like so:
var row = $('#div1 > div:first-child > div:first-child');
alert(row.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
<div class="row">
<div class="another">Another one</div>
<div class="another">Yet another one</div>
</div>
</div>
I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});
I replaced the broken img links with simple text for the jsfiddle.