How can I combine these jQuery statements? - javascript

I have a jQuery statement like this;
var current = $(this);
current.hide();
current.siblings('.ab').hide();
current.siblings('.cd').hide();
I want to change this into a single statement and I wrote;
$(current,current.siblings('.ab'),current.siblings('.cd')).hide();
But ab is not hiding. How can I combine the 3 hide() statements into one?


You can use a multiple selector and addBack():
$(this).siblings(".ab, .cd").addBack().hide();
addBack() will add the original element back into the set, so you can get both the element and its relevant siblings in the same jQuery object.


You can use a multiple selector (comma separated) for the siblings function and than use addBack to include the first element.
Add the previous set of elements on the stack to the current set,
optionally filtered by a selector.
Code:
current.siblings(".ab, .cd").addBack().hide();


Try to use .end(),
current.siblings(".ab, .cd").hide().end().hide();
or use .add() like below,
current.add(current.siblings(".ab, .cd")).hide();


try this:
var current = $(this);
current.hide().siblings('.ab').hide().end().siblings('.cd').hide();


You can use comma separated multiple selectors in .siblings()
current.siblings('.cd,.ab').addBack().hide();
Working Demo

Related

displaying specific text on tumblr [duplicate]

It looks like JQuery does the search in the current document when using a selector.
How to search for an element only inside a div element?

jQuery selectors work very much like CSS selectors, which you may be more familiar with.
First, select the div, and then descend from that:
$('#my-div').find('some-selector').
or build your selector to match children of the element in question:
$('#my-div some-selector')

Old question, but everyone seems to have missed the scoped jQuery selector (using the scope you desired, i.e. your div selector, as the second parameter)
e.g. use
var $matches = $('.adiv', '#mydiv');
This is a shorter equivalent of:
var $matches = $('#mydiv').find('.adiv');

var elems = jQuery(".foo", jQuery("#divYourWantToLimitTo") ); //BAD
//or
var elems = jQuery("#divYourWantToLimitTo .foo"); //Better
//or
var elems = jQuery("#divYourWantToLimitTo").find(".foo"); //BEST

jQuery provides several ways to search for specific elements:
$("#your_div").find(".your_things"); //Find everything inside
//-or-
$("#your_div").filter(".your_things"); //Find only the top level
//-or-
$("#your_div .your_things"); //Easiest

var elements = $('div ' + yourSearch);

$('div-selector').find('the selector-you-are-looking-for');

Select all elements that don't start with a certain id

Is there a way to get all the elements that don't start with the id foo in JavaScript?
I tried the following:
var elements = document.querySelectorAll('[id!=foo]');
That doesn't work.
Basically I want the opposite of:
var elements = document.querySelectorAll('[id^=foo]');

Use the :not() selector:
document.querySelectorAll(":not([id^='foo'])");

You can use the :not pseudo selector to match everything except [id^="foo"]:
var elements = document.querySelectorAll(':not([id^=foo])');

Just select all and then filter out the one with the id
document.querySelectorAll("*").filter(...)

jQuery select all classes except one ID

I need to select all divs of a certain class (jqx-slider) excluding one ID (#str_prg) - something like:
$("div.jqx-slider :not(#str_prg)").each(function () {
.....
});
What is the correct syntax for that?
Also, would it be faster and more effecient code, if I add a "if" condition inside the loop - like
if($(this).attr('id') ! = "str_prg"){
}
Thanks!

You are using an descendant selector between the class selector and the not selector, which is invalid for your requirement
$("div.jqx-slider:not(#str_prg)")
when you say $("div.jqx-slider :not(#str_prg)") it selects all descendants of elements with class jq-slider except the one with id str_prg

Try to remove an unnecessary space char like this:
$("div.jqx-slider:not(#str_prg)")

Remove the space, as it would cause you to select children, instead of the element itself.
$("div.jqx-slider:not(#str_prg)").each(function() {
.....
});
For the second part of your question, it would be better to just use the CSS selector instead of a JS loop.

Addition of two sets of selectors in one

I want to add to sets of selectors to one set.
For example:
$("div") gives me all sets of div and $("span") gives me all sets of span.
Now I want to add them to form one set of selectors which contain all spans and divs.
Avoid to advice for adding class, I need to merge this two sets only.

You can use add method.
$('div').add('span').DoYourStuffWithBoth();
or
var divs = $('div');
var spans = $('span');
divs.add(spans).DoYourStuffWithBoth();

You can combine multiple selector using comma between them like this
$("div, span")

jQuery selectors are basically css selectors. You combine two selectors by comma separation:
$("span, div");

You could just run the combined selector:
jQuery('div, span')

How about:
$('div, span')
Should give you a set of elements with both div's and span's

How to search all <input> descendants of a DOM element and disable them

Let's say that I have a DOM object:
var a = document.getElementById('parent')
I want to search all input inside element a.
What should I do in jQuery?
I want to disable all input inside a, like syntax below:
$('#parent input').attr('disabled',true);
I tried
$(a).children('input').attr('disabled',true);
but gave no results.
Note: var a is an element I got from another function.

$(a).find('input').prop('disabled', true);
children() just searches immediate children of the element while find() searches all descendants.
Update: Also consider sinsedrix's remark on the difference between attr() and prop().

Don't forget attr is for HTML attributes and prop for DOM properties, try this:
$(a).find('input').attr('disabled','disabled');
or
$(a).find('input').prop('disabled',true);

$(a).find('input').attr('disabled',true)

$(a).find('input').attr('disabled',true);

Categories