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.
Related
HTML Coded snippet is here
Using protractor, when am writing the following code, am only able to select the 3rd element from the first matching class
var items = element(by.css('.swatches.swatches_size.swatches_find-box')).all(by.tagName('label'));
items.get(2).click();
What would be the way to select 2nd element from the second matching class?
The code snippet is in the attached image
its element.all(by.css('.swatches.swatches_size.swatches_find-box')).each(function (element, index) {
You can just chain element() and all():
$$('.swatches.swatches_size.swatches_find-box').get(1).all(by.tagName("label")).get(1);
where $$ is a shortcut to element.all(by.css("...")).
Or, an alternative approach would be to use a single CSS selector with the help of nth-of-type and nth-child pseudo classes:
$(".swatches.swatches_size.swatches_find-box:nth-of-type(1) label:nth-child(1)")
Thanks for the responses. Here is what I did to select the third element of the second matching DIV:
element.all(by.css('.swatches.swatches_size.swatches_find-box label')).
each(function(element, index) {
element.getText().then(function(text) {
if (text === waist) {
element.click();
}
if (text === length) {
element.click();
}
});
});
Instead of .get(1), .get(2), .get(3), etc. now you can use more readable functions like .second(), .third(), .fourth() etc. - I developed a small package - https://github.com/Marketionist/protractor-numerator - that can be used with protractor to select second, third, fourth, etc. elements.
So, applied to your case (to select 2nd element from the second matching class), it would be much more readable and will look like this:
var itemSecond = element.all(by.css('.swatches.swatches_size.swatches_find-box')).second().all(by.tagName('label')).second();
itemSecond.click();
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
This finds the id but does not remove the class
$('[id^=paritalIDname]').removeClass('[class^=partialClassName]');
Probably because the element looks like
<div id="partialIDname-full" class="something someone partialClassNameFull">
Whether the element has a class name of partialClassNameFull or partialClassNameHalf I need to remove it.
I thought I could use a wildcard in the class selector, like
removeClass('[class^=partialClassName*]');
but that's not working.
What is a good solution? (Thanks.)
This will handle all partial match.
$("div[id^=partialId]").each(function () {
var cls = $(this).attr("class").split(" ");
for (var i in cls) {
if (/partialClass/.test(cls[i])) {
$(this).removeClass(cls[i]);
break;
}
}
});
You need to explicitly remove both classes:
$('[id^=partialIDname]').removeClass('partialClassNameFull').removeClass('partialClassNameHalf');
Because .removeClass() only works on full class name matches. If one of the class names is not present, then nothing will happen - no error is thrown when you try to .removeClass() a class that is not present.
You can also try out as suggested in the comments the briefer version of:
$('[id^=partialIDname]').removeClass('partialClassNameFull partialClassNameHalf');
For example, I've got a selector here
var $myNeeds = $('.history');
This selector would have multiple divs inside, and now I want to get the last child from it, how to do this?
I tried $myNeeds.last(), this won't work!
Alternatively....
$myNeeds.find('>:last-child')
jsFiddle.
You're almost there...
$myNeeds.children().last()
The last method gets the last element in your set.
You want the last child of your set, so you need to get a new set with the children.
You could also write
$('.history > :last-child')
or
$myNeeds.children(":last")
<div id="dad">
<img id="mum">
<input>
</div>
With jQuery, how could i get access to the input element, get is value or set it for example? I can't work out how to access something on the same level.. and i dont want to be using ID's, just parent/child nodes so i can use the code for loads of dad div's
Thanks!
an addition to Zed,
$(this).parent().children('input');
if you give a name to your input field then you can easily select throughout the others,
$(this).parent().children('input[name=my_input]');
then you can give any value as:
$(this).parent().children('input[name=my_input]').val('any value');
Sinan.
var myEl = $("#dad").children(":input");
$(this).parent().children() ?
Try this, to find the first child input element:
jQuery("div").find("input:first")
If i understand question, you would like achieve input from mum leve?
So try $("#mum ~ input")...
BTW, great site to search jquery function by category http://visualjquery.com/ +nice example.
I guess you want to find siblings (node with same depth and same parent and in DOM tree)
$(el).next() - next element (sibling) for all elements in the set
$(el).nextAll - all following siblings
$(el).nextUntil - all following siblings, stop on some condition (not including first "bad match").
Besides, you have next adjacent selector (+) and next sibling selector.
The same about prev, prevAll and prevUntil.
And you even have a siblings method.
Check this out.