Is there a way to check if a next element exists? Check my code:
if($("#people .making-of .mask ul li.current").next("li") != null) {
alert("Exists");
}
else {
alert("Dont exists");
}
What am I doing wrong? Thanks a lot!
Have you tried looking at .next('li').length?
Use jQuery .is(), using .is() you can even check what tag, class or ID next element have?
if($("#people .making-of .mask ul li.current").next().is('li')) {
alert("Exists");
}
else {
alert("Dont exists");
}
The briefest method is just:
if( $( ... ).next('li')[0] ) {
Since jQuery functions always return a jQuery object, it's never equal to null. But accessing a jQuery object like an array acts like you are using an array of DOM objects, so [0] will pull the first matched DOM element or null. Checking .length() against 0 works, as well.
Use the length method in jQuery:
if($(...).next().length > 0) {
alert("Exists.")
} else {
alert("Doesn't exist!")
}
if($("#people .making-of .mask ul li.current").next("li").length > 0) {
alert("Exists");
}
else {
alert("Dont exists");
}
Like the post above says, you need to check the length of the item. Jquery.next() will always return a jquery object, but if there is no next item, it will have a length of 0.
if($("#people .making-of .mask ul li.current").next("li").length > 0) {
alert("Exists");
}
else {
alert("Dont exists");
}
I think this is good to use like.
if ($(this).nextAll().length > 0) {
alert("Exists");
}else{
alert("Don't exists");
}
Related
Below is a sample structure from which i'm trying to get the specific value of custom attribute
<div id="123"></div>
<div id="456"></div>
<div context="james"></div>
Below is how i'm trying to fetch, but it always returns false.
if ( $('div').attr('context') == 'james' ) {
alert("yes");
} else {
alert("no");
}
The call to $('div').attr('context') will only grab the first div found in the DOM and check it's value. Since it doesn't have that attribute you get false. Instead you will want to iterate over all your div's and check each one. For example:
var found = false;
$('div').each(function( ) {
if($(this).attr('context') === 'james') found = true;
});
if(found) alert("yes");
else alert("no")
You could also use .filter:
if( $('div').filter(function(){ return $(this).attr('context') === 'james' }).length )
alert("yes");
else
alert("no");
Note: If you used data-context="james" you would use the .data() method rather than .attr().
Simply let jQuery do the filtering for you. Also, this can be done with plain old vanilla javascript pretty easily:
// Select by attribute
var theDiv = $("div[context='james']");
// If we have something here...
if(theDiv.length){
console.log(theDiv.text() );
} else {
console.log("Nope, not found.");
}
// We can use this same selector with plain javascript...
let theSameDiv = document.querySelector("div[context='james']");
// In this event, however, we access the text differently.
if(theSameDiv){
console.log("Found without jQuery!", theSameDiv.textContent);
} else {
console.log("Rats...");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="123">the first div</div>
<div id="456">div the second</div>
<div context="james">I'm 'Enry the Eighth, I Am!</div>
I am working on javascript conditions.
If the field is empty I open an alert, else the function gets executed.
But I am trying to add another condition -- to verify the class of the field. If it is not in the page, or if it's empty, then directly execute the function/show an error.
How can I check with javascript if the class is in the page and if it's filled ?
$("#bouton").on("click", function(){
var warnning_message = 'warning message';
if(!$('.the-class').val()) {
alert(warnning_message);
}
else{
console.log('ok');
}
Seems hasclass will be useful
if($('.the-class').val()==='' && $('.the-class').hasClass('className')) {
alert(warnning_message);
}
You can check the existence of the class with $(".the-class").length > 0 code:
$("#botton").on( "click", function() {
var warnning_message = 'warning message';
if( $(".the-class").length > 0) {
alert(warnning_message);
}
else {
console.log('ok');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botton" class="the-class">Click Here</div>
If you want to check whether an element with specific class exists or not use the following:
if ($(".the-class").length>0){
alert('Exists');
}
You could put ID to the field in order to select it and then do something like this:
if($( "#mydiv" ).hasClass( "the-class ))
console.log('has class');
else
console.log('no class');
Check the length of the array
if( $('.the-class').length == 0) {
alert(warnning_message);
}
else if (!$('.the-class').val()){
alert(warnning_message);
}
I have problem with indexOf.
I have search and when I type something, .mark-select li will disappear or appear, depend on key word, I want to do something when there is not words in search that contains in .marka-select li . I don't know how to check when there is not same words.
Help please!
This is my code :
$("#marka").keyup(function() {
var marka = $("#marka").val().toLowerCase();
if(marka != "") {
$(".marka-select li").hide();
$(".marka-select li").each(function() {
var trenutna_marka = $(this).attr("data-keywords").toLowerCase();
if(trenutna_marka.indexOf(marka) >=0) {
$(this).show();
}
});
} else {
$(".marka-select li").show();
}
});
Of course it is possible that I just do not understand the question but why not just add an else statement to your if indexOf check?
if(trenutna_marka.indexOf(marka) > -1) {
$(this).show();
} else {
... do something else ...
}
I need to have a if/else statement inside a function. How do you check if an element (e.g. #cadrage) has a display style property? This is what I have found around the net and yet, it is not working..
if( $('#cadrage').attr('style').display == 'block' ) {
// do something
} else {
// do something
}
The jQuery .css() function seems to be what you want.
if( $('#cadrage').css('display') == 'block' ) {
console.log('It equal block');
} else {
console.log('It did not equal block');
}
http://jsfiddle.net/SamMonk/FtP6W/
Your code doesn't work because style property only contains inline styles, not those coming from a stylesheet.
To get the computed style, you can use css method:
$('#cadrage').css('display') == 'block'
Try this:
if( $('#cadrage').css('display')== 'block' ) {
// do something
} else {
// do something
}
You can get your element display property with the following code snippet
$('#cadrage').css('display');
Note that the css method can return any css property of your element so it is very handy.
Therefore your statement code will be:
if( $('#cadrage').css('display').display == 'block' ) {
// do something
} else {
// do something
}
Not exactly what you ask for, but perhaps what you are looking for...
You can use the :visible pseudo selector to check if the element is visible:
if( $('#cadrage').is(':visible')) {
// do something
} else {
// do something
}
Note that this doesn't actually check the display style, but rather if the element has a size so that it could be seen in the page.
I'm trying to get an input box to perform on blur() either set a value of 0.000 if the value entered is an empty string and if it isn't then perform some function. This is what I have. Help me out here, I don't know the appropriate syntax on how to do this.
jQuery("#10kt-weight").blur(function(){
if(valueOf("#10kt-weight") == "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
jQuery("#10kt-weight").blur(function(){
if(jQuery("#10kt-weight").val() === "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
Since your function is executed by the .blur() method, using this inside the function will refer to #10kt-weight, you can get the actual value of your element with jQuery(this).val() (or this.value) Try this:
jQuery("#10kt-weight").blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val("0.000");
} else {
calc_value();
}
});
You can try with jQuery.trim() to trim spaces and .length to check if there are characters after trim the input value
jQuery("#10kt-weight").blur(function(){
if(jQuery.trim(jQuery(this)).length) {
jQuery(this).val("0.000");
} else {
calc_value();
}
});