I want to check if `id` has no content - javascript

I want check between id that get in var span, if empty was between it put css for input but it not work. how can fix it?
var span = '#'+$('.valid').closest('.auto_box').find('span').attr('id');
if ($(span+':empty').length != 0) {
//alert('ok')
(this).closest('.auto_box').find('input').css('background-color','#000');
}
See here my full code: http://jsfiddle.net/Pjqv2/2/

You are using (this) instead of $('.valid') or whatever you meant with it. Also, you are doing this the wrong way; .find('span') returns the jQuery objects set for that span.
You don't need to get it's ID and then check on that ID again. More importantly, your code seems the need to run on multiple instances of .auto_box. For that, you need to iterate on the set found by (".valid").closest(".auto_box"), which you can do with the jQuery .each() (.each() in jQuery docs) like this:
var autoBoxes = $(".valid").closest(".auto_box");
autoBoxes.each(function(){
if ($(this).find("span").is(":empty")) {
$(this).find("input").css("background-color", "#000");
}
});
Your updated jsfiddle with this script: http://jsfiddle.net/dvir_azulay/Pjqv2/4/

Change (this) to $(span). I updated your fiddle to reflect this change.

Related

change background-image value dynamically

I am trying to find all the elements with a specific background-image and change it to another one.
I tried doing it with this piexce of code:
jQuery('a').each( function() {
if ( jQuery(this).css('background-image') == 'url("someurl.png")' ) {
jQuery(this).css('background-image') == 'url("anotherurl.png")';
}
});
but it didn't work...any idea how can i do it??
since this is a really small page i would rather go threw all elements in the page...
there is a way to go threw all elements in page?
Change:
jQuery(this).css('background-image') == 'url("anotherurl.png")';
to:
jQuery(this).css('background-image','url("anotherurl.png")');
Setting a property with .css()
When setting values with jQuery's css(), you'd do
jQuery(this).css('background-image', 'url("anotherurl.png"))';
It's a function, not a property that can be set with =
You need to use the setter of css() to change the property. You can also use filter() and the instance of jQuery passed in to the document ready handler to keep the $ in use. Try this:
jQuery(function($) {
$('a').filter(function() {
return $(this).css('background-image') == 'url("someurl.png")';
}).css('background-image', 'url("anotherurl.png")');
});

jQuery: issue with each loop

I am new to jQuery and hope someone here can help me with this:
Basically what I am trying to do is the following:
Check for all elements with the class "limit" and get their maxlength.
Find an element with the class "count" in the same row.
Add the found maxlength to the count element's text.
I am using the following but this displays the last maxlength for all the elements in question. My guess is that my last element is perhaps overwriting the others.
Can someone tell me what I have to change here ?
var limit = '';
$('.limit').each(function() {
limit = $(this).attr('maxlength');
$(this).closest('tr').find($('.count').text(limit));
});
Many thanks in advance, Mike.
Try to use:
$(this).closest('tr').find('.count').text(limit);
You don't need to convert .count to jQuery object inside .find() method. You also need to put .text() outside of .find()

If DIV contains checked checkbox set display to block

I have a menu consisting of sort criteria. The options per criteria are listed as check boxes in a div wioth class '.collapse_box'.
I need to check each of these div's to see if any of the checkboxes it contains are checked. If there are any checkedboxes I need to set the DIV display to block.
I was thinking along these lines:
$('.collapse_box')each(function()
if( $(this).(input:checked).length() > 0{ //here lies my problem
$(this).show();
}
});
Seeing that I am very new to javascript and jquery I don't know how to return the checked boxes for $(this). Or better said: the correct method to check if any checkboxes in $(this) are checked.
Your selector is wrong, element are always given as string or object:
if( $(this).find('input:checked').length > 0){
Also, length isnt a function, but a property. And you forgot the .find()
Made you a jsFiddle with demo
Alright, assuming that the inputs are children, something like this will work:
$('.collapse_box').each(function(){
if($(this).find('input').prop('checked')){
$(this).show();
}
});
The .prop('checked') piece returns a boolean value of whether the input is checked or not.
EDIT Martijn makes a good point, you can switch it to vanilla JS with a mod to the selector.
$('.collapse_box').find('input').each(function(){
var self = this;
if(self.checked){
self.style.display = 'block';
}
});

Disable a text area by it's class (not id)

I have 2 text area's that are generated automatically, and I need to use JavaScript to disable both when the page has loaded. The catch is because they are generated automatically I can't give them an ID because they would both have the ID - a big no.
Attempted Javascript:
document.getElementByClassName('option_window-size').disabled=true;
I know this works because if I change getElementbyClassName to ID then it will work if I give the text areas the ID as well. But as I say it needs to work off class. Also it can't work of the Name attribute because that is automatically generated per product and per page...
I have tried this but it just doesn't work and I can't figure out why not because it should as the only thing I have changed is from ID to CLASS
Text Areas
<textarea name="willbeautogenerated" class="option_window-size" cols="40" rows="5">willbeautogenerated</textarea>
Additional note: I have tried to count and assign them different IDs using PHP but it gets far to complex. Also it is only these two that need disabling, thus I can't just disable all text area's on the page.
I know this works because if I change getElementByClassName to ID then it will work if I give the text areas the ID as well. But as I say it needs to work off class.
getElementsByClassName returns a NodeList rather than a Node itself. You'll have to loop over the list, or if you expect just 1 item, choose index 0.
var nodes = document.getElementsByClassName("option_window-size"),
i = 0, e;
while (e = nodes[i++]) e.disabled = true;
jQuery makes this pretty simple:
$(".selector").prop("disabled", true);
ALTHOUGH! It should be noted that this note appears on the man pages for $.prop() and $.attr():
Note: Attempting to change the type property (or attribute) of an input element created via HTML or already in an HTML document will result in an error being thrown by Internet Explorer 6, 7, or 8.
This doesn't apply directly to your question, but you are changing prop/attrs on an input element, so be aware.
But it's still possible with plain old JS:
var els = document.getElementsByClassName("selector"); // note: Elements, not Element
for(var e = 0; e < els.length; e++)
{
els[e].disabled = true;
}
getElementsByClassName returns an NodeList, you just have to iterate over each element within.
You can use class selector,
$('.option_window').attr('disabled', true);
OR
$('.option_window')[0].disabled = true;
With Jquery you can do:
//make sure to use .prop() and not .attr() when setting properties of an element
$('.option_window').prop('disabled', true);
Disable textarea using jQuery:
$('.option_window-size').attr('disabled', true);
your missing a s in elements and the index where the element is like [0], for the first element.
document.getElementsByClassName('option_window-size')[0].disabled=true;
or
document.getElementsByName('willbeautogenerated')[0].disabled=true;
Disabel texarea using .prop() methode in jquery...
$('.option_window-size').prop('disabled', true);
You can use CSS:
.option_window-size{display:none;}

Display number of checked checkboxes in jQuery

I am quite new to jQuery, I think this might be quite easy for many of you, but I can't seem to make it work. How can I display the number of checkboxes so that the value increases or decreases.
i tried the following but with the number in the span tag remains 0: http://jsfiddle.net/yunowork/NTwxc/
Thanks
You should listen to the change event:
$('input[type=checkbox]').on('change', function(){
var number = $('input[type=checkbox]:checked').length;
$('.totalchecked').text(number);
});
http://jsfiddle.net/NTwxc/7/
Note that val is used for getting/setting values of form elements, for other elements like span element, text or html methods should be used.
Number of checked checkboxes:
$(":checkbox:checked").length
http://api.jquery.com/checked-selector/
edit: I see in your fiddle that you already had that. I'll leave it there, since that's actually the answer to "how to display the number of checked checkboxes"...
The problem is that you're not updating and looking to see how many are checked. You need to re-run that function whenever any of the items are checked.
$(":checkbox").change(function () {
// update the span with $(":checkbox:checked").length ...
});
You shouldn't be setting .val of a span, but .text.
Also, you need to update it every time the checked state changes.
function calc() {
$('.totalchecked').text($(':checkbox:checked').length);
}
$(calc);
$(':checkbox').change(calc);
Demo
Here we are!
$('input[type="checkbox"]').change(function() {
$('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
});
http://jsfiddle.net/toroncino/PTvG8/
Problems: .val() is for form elements only. To set the content of an element, use .text() or .html() if you are inserting HTML. Second problem is that you need to register a listener to "change" events. Otherwise, the value won't update.
Updated solution: http://jsfiddle.net/NTwxc/4/
$("input[type=checkbox]").change(function(){
var number = $('input[type=checkbox]:checked').length;
$(".totalchecked").text(number);
});
​
By the way, I would personally prefer input[type=checkbox]rather than :checkbox. The former works for both CSS and jQuery.

Categories