How to loop through all unchecked checkboxes? - javascript

Using jQuery, is there a fast way to loop through all unchecked checkboxes on a page that have className="carCheckboxes".

Use the .each() method with the :not(:checked) selector. Here are the references:
Reference to jQuery.each method
Reference to jQuery:not selector
Reference to jQuery:checked selector
$("input.carCheckboxes:not(:checked)").each (function () {
//your code to loop through each element.
//$(this) references the current element as a jQuery Object
});

Related

How to get concrete element by jquery selector?

I want to do something like:
if($(this).hasClass("playButton"))
{
$(this).find("li").removeClass("active");
}
But instead of "this" in "if" statement I want to use any class selector. But I don't know how to get concrete DOM element, which corresponds to the condition.
So I need:
if($(.anyClass).hasClass("playButton"))
{
$(current element, which corresponds to
if condition).find("li").removeClass("active");
}
$(".playButton li").removeClass("active");
...?
You can select the elements using the ".anyClass" selector and then iterate through them using each. In the callback function of each, this will refer to the current DOM element.
$(".anyClass").each(function() {
if ($(this).hasClass("playButton")) {
$(this).find(".btn").removeClass("playButton");
}
});
However, for this particular scenario, you can reach your goal without using each. Simply target the element directly and manipulate it, as #Derek朕會功夫 suggested in his answer.
$(".playButton li").removeClass("active");

Add class to div when clicked

I am trying to get a class to be added to a div element when clicked. I can not get it to work, I have it set up similar to this:
javascript:
function choose() {
this.addClass("selected");
}
html:
<div class="initialclass" onclick="choose()">CLICK</div>
I have other javascript commands in that function that are working properly I just can't get the class to add.
You have two issues with your current code. First is that this in your JS function refers to the window, not the element that was clicked. Second if it did refer to that element, it would be a DOMElement, not a jQuery object, so it would not have the addClass() method - you need to convert it to a jQuery object. Try this:
<div class="initialclass" onclick="choose(this)">CLICK</div>
function choose(el) {
$(el).addClass("selected");
}
Note however, that it is better practice to hook up your events using JavaScript. As you are using jQuery, you can do this:
<div class="initialclass">CLICK</div>
$(function() {
$('.initialclass').click(function() {
$(this).addClass("selected");
});
});
change your html like this:-
<div class="initialclass" onclick="choose(this)">CLICK</div>
and function:-
function choose(dv) {
$(dv).addClass("selected");
}
Use classList:
classList returns a token list of the class attribute of the element.
el.classList.add("selected");
classList.add:
Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.
CODE
HTML:
<div class="initialclass" onclick="choose(this)">CLICK</div>
Javascript:
function choose(el) {
el.classList.add("selected");
}
DEMO
If you use jquery add this is code in your $(document).ready()
$(".initialclass").click(function(){
$(this).addClass("selected");
});

For each element with a certain attribute - Javascript

I try to find all elements whith a particular attribute. For each elements, I want to do something dependant of the value of the attribute.
I did a test to take back the value of the attribute but it doesn't work and I don't see the problem.
HTML:
<div id="t">Test</div>
<div data-test="One">Value One</div>
<div data-test="Two">Value Two</div>
JS:
$("[data-test]").each(function(){
$("#t").append(this.attr("data-test"));
});
JsFiddle link: http://jsfiddle.net/fbue5dpc/
Thank you!
this in your each block refers to the DOM element which does not have the attr method. You should use $(this) to convert it to a jQuery object. You can also improve this further by using the data method to retrieve the values and caching the #t element to reduce the number of DOM retrievals being made:
var $t = $('#t')
$("[data-test]").each(function(){
$t.append($(this).data('test'));
});
Updated fiddle
var elemnt = $("[data-test]"),frag = "";
elemnt.each(function () {
frag += $(this).attr("data-test");
});
$("#t").append(frag);
Working DEMO
Try,
$(this).attr("data-test")
Explanation: inside the foreach loop you will get dom element since you are iterating list of dom element. So you cant invoke jquery method directly from dom elemet to do this you have to convert it into a jquery object to do this just use $(this)
$("div[id!='t']").each(function(){
$("#t").append($(this).data('data-test'));
}

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.

Combine $(this) and $("li:eq(ui.item.index())")

With jQuery, how can i combine $(this) and $("li:eq(ui.item.index())") to something like $(this).$("li:eq(ui.item.index())").id ?
I'm trying to get the id attribute of a list element within a sortable list created with jQuery UI kit
$(".sections-list").sortable({ /* Update position of sortable elements */
start: function(event, ui) {
var start = ui.item.index();
var section = $("li:eq(start)").id;
alert(section);
}
});
Assuming what you're trying to do is find a specific indexed li item below this, you can do it like this:
$(this).find("li").eq(ui.item.index()).attr("id")
You can also pass this as a second argument to $(), indicating the context for your search:
$('li:eq('+start+')',this).attr('id')
If the elements you are trying to find are descendants of the $(this) object, then you can use jQuery's .find() function.
$(this).find("li:eq("+ui.item.index()+")").id
If the elements you are looking for are siblings of $(this) then you can use the .siblings() function to find them -
$(this).siblings("li:eq("+ui.item.index()+")").id
Reference -
find()
siblings()
$(this).find(selector);
The find selector takes your initial jquery and searches again within it.
Read more on it here: http://api.jquery.com/find/

Categories

Resources