If I call .hide() on an element, will/can jQuery select it in a normal dom selector.
If jQuery does normally select hidden elements, what is the proper way to select only visible elements. Can I use a css selector, or is there a more valid way of doing this?
Yes. The hide function only stores the current value of the display css property of your element, then set it to none. So the dom selectors will not be affected by it unless they try to match elements with a particular display css value.
Check it here.
Have a look at the jQuery hide function documentation.
Yes it will count hidden elements.
Yes, it just adds a display:none style to the element... .remove() on the other hand will not show up in counts. But that completely gets rid of it, and unless you store the value somewhere it is not retrievable.
What I'm assuming you want to do is to count the visible items. I would instead do the following:
$('.element').addClass('hide');
var count_of_visible_items = $('.element:not(".hide")').length;
console.log(count_of_visible_items);
Related
I need a smart solution for setting textareas attributes. I do have a lot of textareas at the page. Some are disabled and some are not. It depend on user logged in and selections made. All of the textareas are 'required' by custom class 'class="reqformtextbox validate[required]"',
What I want is to scroll/find textboxes and set its class to class="reqformtextbox", effectively removing 'required' attribute for the textboxs which are currently disabled by 'disabled="disabled"' attribute.
Yes, you can use jQuery to solve this.
Here is the example
$(function(){
$("input[type=text]").attr("required","required");
});
Replace selector if you have any other selector. This will apply for all textbox in the page.
Assuming enabeditable is an attribute with boolean values (correct me if I'm wrong), the jQuery you want is:
$('textarea[enableditable=true]').attr('required', true);
$('textarea[enableditable=true]') will select all elements with tag textarea and attribute enableditable=true
attr('required', true) will add or replace attribute required=true.
Javascript doesn't have a one-line selector for html tag + attribute, but you can make a function that queries all elements by getElementsByTagName(), iterates them and returns a list with all elements having `getAttribute('enableditable') = true.
I need to set focus on the first form element or class of ".focus"; whichever is visible or first.
This does not seem to sort through each to determine which comes first?
http://jsfiddle.net/infatti/tdvHJ/1/
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').focus();
This will locate all visible input elements, textarea elements and .focus elements:
$('input:visible, .focus:visible, textarea:visible')
It will also have them ordered according to their order in the DOM, so the first of those elements in the document will be the first in the jQuery object. To access the first:
$('input:visible, .focus:visible, textarea:visible').eq(0);
and to focus on it:
$('input:visible, .focus:visible, textarea:visible').eq(0).focus();
Note that, as I just found out, jQuery considers elements to be 'visible' if they take up space in the document. So elements with visibility:hidden or opacity:0 will still be considered visible:
http://api.jquery.com/visible-selector/
Like this ?
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').eq(0).focus();
Fiddle :
http://jsfiddle.net/infatti/tdvHJ/1/
Eq(0) select the first element... ;)
Try:
$('.focus:visible:first').filter(":input").focus();
jsFiddle example
im not sure what you are trying to achieve as there isnt any elements with the class focus. Simply add the class focus to your input element and then us
$('.focus').focus();
I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.
You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.
IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();
That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.
an ID can only be used ONCE in HTML! because its a id and a id should always be Unique
In the HTML code, I use jQuery to hide or display an element having an ID. How can I test if an element is already visible?
For example, we use show() to display an element having an ID. But before calling show(), I need to test whether show() has been already used for that ID then how to compare?
$('#element').is(':hidden'); // boolean
If the element is visible, show() won't do anything, so it's pretty low risk. However, you can use the :visible or :hidden selector to find visible elements.
$('#myId:visible').hide();
$('#myId:hidden').show();
Using this in your selector, you can just fire off the show and hide methods and not worry about what is visible or not, because if you try to hide a :hidden element, you won't select anything so you won't do anything.
There are several elements that are selected by $(".foo"). $(".foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$(".foo")[0].text() fails.
You want to use .eq(0), like this:
$(".foo").eq(0).text()
When you do $(".foo")[0] or $(".foo").get(0) you're getting the DOM Element, not the jQuery object, .eq() will get the jQuery object, which has the .text() method.
Normally using the # selector syntax selects one element by id attribute value. Do you have more than one element with the same id attribute value? If so, then you need to correct your HTML. id attribute values should be unique within a document.
The items in the jQuery array always return the dom elements (not the jQuery wrapped elements). You could do something like:
$($("#foo")[0]).text()