Develop Reference

Set focus on input field for next element of certain class name

I'm trying to set focus on the first input field in an element with class of .search-options that comes next one the page.
This is what I am using, however its not working.
$(document).ready(function() {
$('.toggle-search-options').on('click', function() {
$(this).next('.search-options *:input[type!=hidden]:first').focus();
});
});

This is very similar to this: jQuery: Find next element that is not a sibling, except that the current element doesn't match the selector you are looking for. In that case you simply have to add it to the selection:
// Outside the event handler:
var $elements = $('.search-options *:input[type!=hidden]');
// Inside the event handler:
var $elementsWithCurrentElement = $elements.add(this);
$elementsWithCurrentElement.eq($elementsWithCurrentElement.index(this) + 1).focus();
If the element you are looking for is actually a sibling, have a look at Efficient, concise way to find next matching sibling? .

I didn't understand the need for the colon in front of "input". This worked just fine for me:
$('#test input[type!="hidden"]:first')
But as an alternate solution, why not grab the first in the array of matches?
var inputs = $('#test input[type!="hidden"]');
if(inputs.length > 0) { $(inputs[0]).focus(); }

Jquery remove element

I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});

You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});

The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");

If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery

jquery - having the selector change all appropriate attributes and not just the first one found

I had a basic question on the jquery selector.
$(function () {
$('.grid').hover(function(){
var divId = $(this).attr("divId");
var $this = $('#' + divId);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
});
});
If I were to hover on a div with the class="grid", how can have all the divs as found by var $this = $('#' + divId); change their imgs? Meaning, when this function executes, only the first div with the appropriate id has it's img src change. I would like it so that all the divs with that appropriate id (attribute) change rather than the first one change.
Also, I would appreciate any help with where I could modify this so that when the img changes it's fades in 'slow'.
Thanks.

The specific difference between an ID and a Class attribute is that IDs are expected to always be unique, whereas classes are intended to be used to identify a group of elements which share a common grouping. If you have multiple elements with the same ID, you are using HTML incorrectly. By rewriting your code such that each element has a unique ID, you can count on those IDs identifying the specific element they're associated with and then give groups of elements which you want to select together a specific class, which is the appropriate way to select a group of elements like you're trying to.

Combining selectors in jQuery

I have a jQuery selector which I am using to apply a tooltip to an element:
TooltipBuilder.buildRackDisplayTooltip(this.$el, rackInformationListView.render().$el);
My element does not have an id. It does not need one because this.$el uniquely identifies the element.
I would like to modify my statement such that the selector now matches two elements:
// Doesn't work
var selector = this.$el + this.$el.children('.rackName');
I am hoping to trigger a mouseout event only when the mouse leaves this.$el or when the mouse enters some, but not all, descendants of this.$el
Is it possible to create such an expression without assigning an id to this.$el?
If my element had an id, I might use a selector such as:
var selector = $('#' + this.el.id + ' ,' + this.el.id + ' > .rackName');
although this still seems unnecessarily verbose

You can combine the elements(probably your variable says selector) using add
var selector = this.$el.add(this.$el.children('.rackName'));
You can even provide just selector strings to add as well.
var selector = this.$el.add('someselector');
And to add on for just in the first example, where you are trying to get the children and add parent to it. You can use var selector = this.$el.children('.rackName').addBack();, second example you can use .add() for distinct selectors.

change jquery selector to not select particular div id

I have a jquery selector that I would like to change so that it wont select <div id="divA"></div>.
Heres the current selector:
$('ul.toggle a').on('click', function () {
//does some work
});
I tried $('ul.toggle a [id!=divA]') but that thows errors.
What is the intended format for this selector?

You can use :not to remove elements from the set of matched elements.
$("ul.toggle a:not('#mhs-link')")

How about this-
$('ul.toggle a').not('#divA')
The .not() function simply removes elements from a previous list of elements. Because of some nifty function chaining, you can just insert that into your current definition -
$('ul.toggle a').not("#divA").on('click', function () {
//does some work
});
References
not() - Remove elements from the set of matched elements.