Develop Reference

JQuery - iterate through elements conditionally to addClass()

I have a few input fields that I'm trying to add a class to their parent container if they are not empty.
Here's the CoffeeScript:
$(".inputA, .inputB").parent().addClass(->
if !$(this).is(":empty")
"input-set"
)
This is successfully appending "input-set" to the parent class, but in all cases, not just empty input fields.
:(

Use jQuery.filter()
$(".inputA, .inputB").filter(function(){
return this.value !='';
}).parent().addClass("input-set");
Less function calls than using $.each

:empty will select elements that don't have children. Therefore, using it to conditionally select the parents of certain elements doesn't make any sense.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
If you're looking to add the class to the parents of inputs that haven't been populated then you could use something like:
$(".inputA, .inputB").each(function(){
if (this.value !== "") {
$(this).parent().addClass('input-set');
}
});

First, input elements are by definition empty..
Read the :empty documentation at http://api.jquery.com/empty-selector/
Second you are testing the parent elements and not the input ones.. (and since they are parents, meaning they are not empty they all fit the bill..)

space in javascript

I have a little problem. I have a code with a form input, but the form input class is named
text-input small-input
I can't change this because of CSS issues and this is the problem, because when I add the space in my javascript code, my code doesn't work anymore
Javascript code
$(document).ready(function() {
$('.text-input*small-input').keyup(function() {
var search_term = $(this) .val();
$.post('search.php', {search_term:search_term}, function(data) {
$('.result').html(data);
$('.result li').click(function() {
var result_value = $(this).text();
$('.text-input*small-input') .val(result_value);
$('.result').html(' ');
});
});
});
});
So at the * sign, there needs to be a space. Any way to solve this? Thanks!

you do not want a space, you want nothing there. just .text-input.small-input to tell the selector engine to look for an element with both of those classes.
here is a very good article explaining multiple part selectors.

You had two issues. You don't want a space and you do want a dot on the second class.
To specify a requirement of two classes on the same object in a CSS selector, you put no space between the two class names:
$('.text-input.small-input') // find single object with both classes on it
With a space, it does something different:
$('.text-input .small-input') // find .small-input with ancestor .text-input
When you put a space between them, that creates a selector that finds an object that matches .text-input and a child that matches .small-input and the matched object is the child. No space between them means both classes must be on the same object. This is how CSS specifications work and isn't jQuery-specific.
FYI, what you were trying to do with this:
$('.text-input small-input') // find <small-input> with ancestor that is .text-input
was trying to find an object with a tag of <small-input> that had an ancesotr of .text-input because you put no special character in front of small-input so it was interpreted as a tag name.

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?

I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/

$("input[title]").not('[title=""]')

var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

Referencing the HTML select control currently being used

I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist(document.myform.myselect);
filter.set(this.value);
});
});
but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.
Any ideas how I do this? I need something like this in the HTML:
<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />
but I'm not sure exactly what I'm doing here and what to do with the JS.
Thanks guys :).

Try this:
<input data-filterable="#selectbox1" size="30" type="text" />
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist($($(this).data('filterable'))[0]);
filter.set(this.value);
});
});
To break down the expression $($(this).data('filterable'))[0]:
$(this) wraps this in a jQuery wrapper. In our context, since it's a jQuery keyup event handler, this references the <input> DOM node.
$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it's #selectbox1.
After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).
Finally, we take the 0'th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn't a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.

dynamic tag count on keyup

I have a div that contains many spans and each of those spans contains a single href.
Basically it's a tag cloud. I have a textbox with a keyup event that filters the tag cloud div (It actually just hides the tags if not in filter condition).
Is there a way to get a count of the tags shown as the keyup event occurs?
Thanks,
rodchar

$("#filter_input").keyup( function() {
count = $("#cloud span:visible").size();
// Do something with the counted spans.
});
That should do it, substitute values as needed.

jquery size() Returns the number of matched elements.
$('.tags span a.visible').size();