I'm writing a CSS selector, which I have working so far:
input[placeholder*='mail']
but I'd like to ensure it's not finding invisible (ie: not visible) elements.
I've been trying :visible in various places in the pattern (because I couldn't find a good reference on the CSS selector lexer, but not luck with these:
input[placeholder:visible*='mail']
input:visible[placeholder*='mail']
input[placeholder*='mail']:visible
How do I do this? And anyone have a good reference on learning more complex selector formats?
:visible is a jQuery selector. Not a CSS one.
And you can't use it on an element's attribute like placeholder.
To check if there is an inputted value (which makes the placeholder "not visible"), you need to use some client-side code.
The jQuery would look like this:
$("input[placeholder*='mail']").each(function(){
if( $(this).val() != "" ){
// Do something.
// ...
}
});
To "filter out invisible elements" and keep only the visible ones:
var visible = $("input[placeholder*='mail']:visible").length;
console.log(visible+" elements are visible.");
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one" placeholder="My mail">
<input type="text" id="two" placeholder="Your mail">
<input type="text" id="three" class="hidden" placeholder="Junk mail">
<input type="hidden" id="four" placeholder="Cool mail">
There is no CSS selector for :visible. You sould then work with classes and target the elements which have the class .visible. (Or NOT have the class .visible.
The :visible selector is only available in jQuery for example, which uses the pseudo selector for finding elements visible in current scroll view.
You can't do it with only CSS.
But you can do it with jquery and most probably this answer can help you.
Related
I've always used class names to select sets of related elements. e.g.
<input type="checkbox" value="1" class="checkbox_set_1">
<input type="checkbox" value="2" class="checkbox_set_1">
<input type="checkbox" value="3" class="checkbox_set_1">
$('.checkbox_set_1').filter(':checked') ...
I do this because I know jQuery can delegate to document.getElementsByClassName which should be pretty fast. However, adding classes to all the elements I want to select but not style seems kind of dirty. Isn't there some overhead when the browser has to check checkbox_set_1 against its stylesheet to determine if my checkboxes need styling? Plus, there's some risk of accidental styling if I haven't named my classes nicely.
Is there a better way to select elements that doesn't rely on an attribute meant for styling, without giving up the performance benefits? Or more specifically, is there an attribute other than class (used for styling) and id (limited to a single element) that the browser will optimize queries for?
There are many other attributes to pick from, including data-* attributes, but I don't think the browser optimizes lookups on anything other than id and class, does it?
Isn't there some overhead when the browser has to check checkbox_set_1
against its stylesheet to determine if my checkboxes need styling?
Styling isn't determined that way. The browser doesn't take each attributes of an element and look for rules that apply, instead it looks through the rules once and determine which ones applies to the element.
If you are concerned with adding classes to a lot of elements, you can use selectors that make better use of the document structure, for example setting a class on the element containing the checkboxes and use something like $('.CheckboxContainer :checked').
That might not be quite as efficient as setting classes on every element that you want to target, but in most cases the difference is far from noticable. You shouldn't bother too much about efficient selectors until it's an actual problem. After all, you are using jQuery because it's convenient, not to get the best performance.
Yes, it behaves analouge to the "Marker-Interface in java" and you will find the anti-pattern-description of Tom Butler.
If you have a form around, you could use elements (but you must filter other elements) this is faster than calling a method like "getElementsByClassName".
Example
var lst = jQuery(document.foo.elements);
document.write(lst.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="foo">
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" form="bar" />
</form>
I have loads of elements of my page.
<input class="userInput" type="text" />
<img src="myPic.png" class="userImage" id="userImage" />
<input class="firstNameInput someOtherClass" type="text" />
<input class="lastNameInput" type="text" />
...etc...
However I need write a function to change the classes dynamically so that they end in "Red". e.g. "userInputRed","userImageRed". And then another function to revert them back.
I can select them all easily enough...
$('.userInput','.userImage'....)
..but I don't know how to alter their existing classes without writing lengthy code adding and removing classes for each element individually.
e.g. $('.userInput').removeClass('userInput').addClass('userInputRed')
Is there a way to do this using JQuery without so much repetition?
So something like this...
$('.userInput','.userImage'....).appendToClassName('red');
$('.userInputRed','.userImageRed'....).removeFromClassName('red');
You can toggle the class .red and target it in CSS with .userInput.red
I am trying to hide a form on a site, but it refuses to hide via jquery. I can manually set the style properties on the element, but .hide() does not hide it.
Consider this code:
$(document).ready(function() {
$('form').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="style_name" value="small" type="hidden">
<p>I AM hidden</p>
</form>
<form>
<input name="style" value="small" type="hidden">
<p>I should be hidden</p>
</form>
Basically, if there is an input with a name of "style" it can't hide the form. If the input has a different name, it hides it just fine.
Is there a reason this is happening?
The "name" attributes of input elements in a form are used to populate properties on the form DOM node. Your name, "style", overrides the "style" property of the form, which means that jQuery can no longer access the native style object. It needs to do that in order to hide the form.
Note that you can still do this with CSS.
$(document).ready(function() {
$('form').addClass("hidden");
});
CSS:
.hidden { display: none; }
Those old habits of implicitly trampling over namespaces dates from the early days of browser technology. It's hard to imagine anyone thinking it's a good idea nowadays, at least without there being some qualified sub-space (like form.fields or something).
I'm using Xoxco's plugin for tag input found here:
http://xoxco.com/projects/code/tagsinput/
In my modification, I've used JQuery's focus() function
<input id="tags_1" class="tag-holder" type="text" class="tags" /></p>
<div id="std" style="display:none;">
<span id='pdf' onmouseover="" style="cursor: pointer;">PDF</span>
<p id="reset" onmouseover="" style="cursor: pointer;">Reset Tags</p>
</div>
My JQuery for this is
$('#tags_1').focus(function(){
$('#std').css('display','block');
});
However, this doesn't seem to work when used with my modification of the plugin. It does work separately without using the plugin. Anything I'm missing here?
Because the issue is it adds a _tag in your elements id and that id is no more available so you have to target this id #tag_1_tag:
so your code should be like this:
order matters
$('#tags_1').tagsInput({width: 'auto'}); //<----tagInput applied
$('#tags_1_tag').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo Fiddle
or even you can use attribute selectors:
$('[id^="tags_1"]').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo with attribute selector
I'm trying to create an <ol> element with jQuery and set its class and id attributes. Is there any way to do this all at once? None of my ideas have worked so far, I'm still very new to jQuery...
There are at least a couple of different ways to do this:
$('<input id="something" class="something-else" type="text" />')
.appendTo('#someSelector');
or
$('<input type="text" />').attr('id','something')
.addClass('something-else')
.appendTo('#someSelector');