How do I get the content 'This is my name' of the span?
<div id='item1'>
<span>This is my name</span>
</div>
I think this should be a simple example:
$('#item1 span').text();
or
$('#item1 span').html();
$("#item1 span").text();
Assuming you intended it to read id="item1", you need
$('#item1 span').text()
$('#item1').text(); or $('#item1').html(); works fine for id="item1"
Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:
<div class='item1'>
<span>This is my name</span>
</div>
alert($(".item span").text());
Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:
<html>
<head>
<title>jQuery test</title>
<!-- script that inserts jquery goes here -->
<script type='text/javascript'>
$(document).ready(function() { alert($(".item span").text()); });
</script>
</head>
<body>
<div class='item1'>
<span>This is my name</span>
</div>
</body>
You could use id in span directly in your html.
<span id="span_id">Client</span>
Then your jQuery code would be
$("#span_id").text();
Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span.
So
$("#span_id").val();
will return null.
In javascript wouldn't you use document.getElementById('item1').innertext?
$('span id').text(); worked with me
$('#id span').text() is the answer!
$('#item1 span').html(); Its working with my code
VERY IMPORTANT Additional info on difference between .text() and .html():
If your selector selects more than one item, e.g you have two spans like so
<span class="foo">bar1</span>
<span class="foo">bar2</span>
,
then
$('.foo').text(); appends the two texts and give you that; whereas
$('.foo').html(); gives you only one of those.
<script>
$(document).ready(function () {
$.each($(".classBalence").find("span"), function () {
if ($(this).text() >1) {
$(this).css("color", "green")
}
if ($(this).text() < 1) {
$(this).css("color", "red")
$(this).css("font-weight", "bold")
}
});
});
</script>
Related
When hovering over generic elements of the same type, I want to execute a function on this elements that will perform an animation. However as these elements do not have unique ids I'm not sure how to uniquely identify them in JavaScript. Is there a way to use the this key word for this? I do not want to give them all unique ids because a huge amount of the same element and it seems redundant. Any help would be greatly appreciated thanks.
Heres some code I was playing with to try and get this to work. Preferably the simpler the code or using basic javascript better.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});
red is not a variable, it is a string. So that you have to use 'red':
To set the color using JavaScript you have to use style property :
$(document).ready(function(){
$("span").hover(function(){
this.style.color = 'red';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
OR: Using jQuery use .css()
$(document).ready(function(){
$("span").hover(function(){
$(this).css({color: 'red'});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
You can user class as a selector
give the same class to all <span> element
Try Following
$('.hoverTest').hover(function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>
Refer Jquery Hover() for more details
I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>
If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>
Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});
Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>
Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}
I followed this jQuery: Hide parent <td> if contains child <input> with specific class? but its not working in my code:
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('.view-count');
}).hide();
});
https://jsfiddle.net/xzeeuotL/
Two things to fix but you were close.
1) You did not include Jquery as a library for the JSFiddle
2) In the hasClass method you need to remove the . in the class name
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
Here is a working fiddle
https://jsfiddle.net/rn2jzpfc/
You were close. Just one mistake in your code.
When you are checking if something hasClass there is no need to have the . preface it.
Also remember you need to include jquery.
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
You can do this without Jquery
Here is an example using pure javascript.
var divSel = document.querySelectorAll('.video-list-item > .view-count');
for (var i = 0; i < divSel.length; i++) {
divSel[i].parentElement.style.display = "none";
}
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
Hope this helps.
The next code returns the parent with video-list-item class of elements with view-count class; then hide the parent. I thinks it's more easy than your approach:
$(".view-count").closest('.video-list-item').hide();
Updated JSFiddle: https://jsfiddle.net/tomloprod/xzeeuotL/2/
Another solution:
$(function() {
$('.video-list-item').find('span.view-count').hide();
});
You have to change that syntax for your case.
you have to be sure that your <td> has a class name like ".video-list-item" and later change in the $('span', this) for $('input', this), of course, you input would has a class name like view-count. something like this..
$(function() {
$(".video-list-item").filter(function() {
return $('input', this).hasClass('view-count');
}).hide();
});
<td class="video-list-item">
<input class="view-count">
</td>
i hope it can help you.. nice day!!
Useful thing if you want to remove closest parent that contains child with specific class:
<div class="closest_parent">
<div></div>
<div class="child_class"></div>
</div>
$('.child_class').closest('.closest_parent').remove();
I am adding text to an element in Jquery using
$('.alert-saved').append('<br />See more like this >>')
I then show this to the user and pause.
$('.alert-saved').delay(5000).fadeOut(2000);
I would now like to remove all the text I appended.
I have tried this but it didn't work
$('.alert-saved').remove('<br />See more like this >>')
Just pass an empty HTML string argument:
$('.alert-saved').html('');
EDIT 1
If you need to keep other elements, you can use this method:
var newLine = jQuery('<br />See more like this');
jQuery(".alert-saved").append(newLine);
setTimeout(function() {
jQuery(newLine).remove();
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="alert-saved">
<span>I wanna stay!</span>
</p>
Change your code to :
$('.alert-saved').append('<div id="divId"><br />See more like this >></div>');
And while removing you can use :
$('.alert-saved').remove('#divId');
With the help of divId you can easily remove your appended element/string from '.alert-saved'.
Check the below code it will work as expected -
$('.alert-saved').append('<div class="testing" <br />See more like this >> </div>')
$('.alert-saved').delay(5000).fadeOut(2000);
$('.alert-saved').remove('.testing')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alert-saved"></div>
You could try this also :
$('.alert-saved').next().remove();
You can wrap your element in an tagged element with a class, or a custom tag, and then delete it accordingly like:
var release_id = 'demo'
$('.alert-saved').append('<div class="added"><br />See more like this >></div>')
setTimeout(function() {
$('.alert-saved>.added').remove();
}, 5000);
Demo: https://jsfiddle.net/Lxy83r43/
Whatever you append append with a class like this and remove all at once using .remove()
Checkout the demo below
$('.yes').click(function(){
$('.alert-saved').append('<div class ="added" ><br />See more like this >>');
})
$('.me').click(function(){
$('.added').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
asdasdasdas
</div>
<input type="button" class="me" value="remove"/>
<input type="button" class="yes" value="add"/>
An easy way to do this work is adding class or id to appended element.
But if you don't want to do this, you can store new elements in variable and append it using .appendTo() to html document like this:
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
When you want to remove elements, use bottom code.
HTML.remove();
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
setTimeout(function(){
HTML.remove();
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
<a>Old link</a>
</div>
I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.