I need some help fixing this code in order to change this JQuery if/else statement to test if a number is present within the div id "demo". Currently the code writes "Empty" when the div has no text inside of it and writes "Full" when it does.
<div id="demo"> </div>
<script type="text/javascript" src="jquery.js"></script>
<script>
if( $('#demo').is(':empty') ) {
document.write("Empty");
} else {
document.write("Full");
}
</script>
What I want to happen is for the statement to write "Empty" when there is any space or white-space inside, and for it to write "Full" when there is a numerical value inside the div.
if ($('#field > div.field-item:contains("someText")').length > 0) {
$("#somediv").addClass("thisClass");
}
Edit: Omitted any humor.
I suggest using a regular expression to determine what text is in your div:
var text = $('#demo').text();
if( text.match(/\s+/)) {
document.write("Empty");
} else if (text.match(/\d+/)) {
document.write("Full");
}
Related
I need to replace the text of many divs, where according to the text of each div, put a text or another.
Example: If the text is 0, replace it with "no quota" and if it is different from 0, put "Yes it has".
Html code:
<div><p id="text">1</p></div>
<div><p id="text">0</p></div>
<div><p id="text">1</p></div>
JS code:
$('#text').text(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('"Yes it has');
}
});
But only changes the first element and the others left with the same text.
As I can change the text for each item? Greetings from Chile.
you have multiple instances of the same id. each id needs to be unique - which is why its only affecting the first item. Change the id to a class and you will be able to change each p to the new text. Also spotted a typo in the last else text (correctedin the code below).
<div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>
$('.text').each(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('Yes it has');
}
});
ID is to be used as unique identification number hence only first item changed. Change ID to CLASS should solve the issue.
There are two problems.
First, as others have noted, you should be using a class instead of ID if you want to match multiple elements.
Second, when you give a function argument to .text(), it receives the old text as an argument, and should return the new text rather than calling .html() within it. So it should be:
$('.text').text(function(i, oldtext) {
return oldtext == '0' ? 'No quota' : 'Yes it has';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>
I have a couple of span elements inside a container and I want to match the exact word of one of the spans to insert a banner. I cant figure out how to do this.
First i tried this script:
$(document).ready(function(){
if ($('.head.titlebox span').text().trim() === "match" ){
$('<span class="myAwesomeBanner4"></span>').insertAfter(".productbox em.price.product-card-price")
}
else if ($('.head.titlebox span').text().trim() === "matchother" ){
$('<span class="myAwesomeBanner5"></span>').insertAfter(".productbox em.price.product-card-price")
}
});
This doesnt work - unless I remove the string it should match: === "". So the script seems kike it kinda works. I cant match it to the words though - looks like its correct to me, so not sure why it's not working.
Then I tried this script which works - but I cant figure out how to convert it to use if statement and to create my div to insert in the DOM like above:
$('.head.titlebox span').filter(function(index) {
return $(this).text() === "match";}).css("background", "black");
My HTML for targeting the string:
<div class="head titlebox">
<span id="artid">text</span><h1 id="prod-title">text</h1>
<span>text</span><span>text</span>
<span>match</span>
</div>
So why is the first not working - and how do I combine it with the working filter function of the second script?
You need to loop through all the span tags,
$('.head.titlebox span').each(function() {
if ($(this).text() == "match") {
//insert your html.
}
})
try this:
$(".head").on("click", function() {
var spanList = $(".head span");
$.each(spanList,function(span){
console.log($(spanList[span]).text());
if($(spanList[span]).text() === "match"){
console.log("Matched")
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="head titlebox">
<span id="artid">text</span>
<h1 id="prod-title">text</h1>
<span>text</span><span>text</span>
<span>match</span>
</div>
I want to check if following code is dynamically created or not :
<div id="js_contact_error_message" style="display: block;">
<div class="error_message"> <!-- For this div only I want to apply the above written inline css-->
Please enter full name
</div>
How should I check this in jQuery? If it's present execute the if condition.
Thanks.
The condition that <div class="error_message">...</div> is present within <div id="js_contact_error_message" style="display: block;">...</div> must get checked.
I tried below code but it didn't work for me:
if ($("#js_contact_error_message").find("div.error_message").length != 0) {
alert("Bestow");
}
You can do this:
var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;
$("#js_contact_error_message").toggle(hasDiv);
Note:
You need to place this line of code where you have done your js validations.
or you may try with this:
$(document).on('DOMSubTreeModified propertychange',function(){
var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;
$("#js_contact_error_message").toggle(hasDiv);
});
Try,
For using if-else condition.
if($("#js_contact_error_message").find(".error_message").length > 0)
{
alert("div present");
}
else
{
alert("div not present");
}
But as you stated in your question, you want to apply specific inline css. Make a class for the style what you have and you can use the ollowin code.
$("#js_contact_error_message").find(".error_message").addClass("your_style_class");
This code will apply your css class only for those divs which match the condition.
EDIT:
If you want to add your style to the div, you can try defining it in your page, which will apply as soon as the div is added dynamically.
<style>
#js_contact_error_message .error_message
{
/*your inline style*/
}
</style>
if($("#js_contact_error_message .error_message").length > 0)
{
alert("div is present");
}
else
{
alert("div is not present");
}
Demo
You can check it in many ways.. few of them are :
Use $("#js_contact_error_message").has('div') function of jquery to get the specific element Has in JQuery
If the error message div is the only div to be inside the main div then you can check it as :
Check the element $("#js_contact_error_message").html() is blank or use $("#js_contact_error_message").children() (Children in JQuery) to check if it has any childrens.
Hope this helps :)
make sure your html composition is correct , opening and closing. Then try this code.
if($("#js_contact_error_message").length > 0)
{
$("#js_contact_error_message").find(".error_message").addClass("style_class");
}
I'm trying to remove the class .words from this HTML, whenever it's clicked on it or if a keypress happens over it.
<div id="content" contenteditable="true"> Here are <span class="words" id="whatever">some</span> words </div>
I've tried
$('.words').click(function() { $(this).remove(); });
and more, which work except when I click on another word and cycle over .words using left or right key (since it is content editable). I'd like it to be removed as soon as the the cursor is over the class. Thanks.
Something like this?
var words = $('.words')[0]
$('#content').keyup(function(){
if (words == getSelectionStart()){
$(words).remove()
}
})
function getSelectionStart() {
var node = document.getSelection().anchorNode;
return (node.nodeType == 3 ? node.parentNode : node);
}
Example: http://jsfiddle.net/nickg1/ttMJW/1/
I would like to be able to look in the first span within a div with a class of t_links and buy and detect if the string Account appears. If it does then I want to set some tracking code in jQuery/JavaScript.
There will always be one span within this div. How can I search the contents for an instance of Account using jQuery?
<div class="t_links buy">
<span><a class="" href="https://www.ayrshireminis.com/account/login/">Account</a></span>
</div>
:contains is what you're looking for:
$(".t_links.buy span:first:contains('Account')")
http://api.jquery.com/contains-selector/
Edit: Added first as #adeneo pointed out. This will ensure that it's the first span that you're looking at.
Try (See Demo)
$(document).ready(function () {
if($('.t_links.buy span').text().indexOf('Account')) {
// code
}
});
Or
$(document).ready(function () {
if($(".t_links.buy span:contains('Account')").length) {
// code
}
});
Span has exact match :
if ($("span:first", ".t_links.buy").filter(function() {
return $(this).text() === 'Account';
}).length) {
//set tracking code
}
Span contains :
if ($("span:first", ".t_links.buy").filter(function() {
return $(this).text().toLowerCase().indexOf('account') != -1;
}).length) {
//set tracking code
}
If there is only one span, you can drop the :first.