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.
Related
I have 8 divs with id="div1","div2","div3".... and a class=divs. I also have a button with class="div1","div2","div3"......
When I click the button with id="div1", it will first remove all the class="selected" to all div that has a class="divs" then only the div with id="div1" will have the class selected. And so on.....
I want to use document.getElementByClass() for removing class but it don't work in my FIDDLE. :(
Instead, Im forced to use document.getElementsByClassName()[]. But it seems so hard to code since it requires me to put the specific arrays for the classname.
This is exactly I want to achieve FIDDLE
There is no getElementByClass for a reason: unlike id, class is not specified to be unique in a document. Which element would you get? No, you need the ability to get all of them. And if you get an array, that's solved by looping, not by repeating rows for each index:
However, your design is inefficient; and if you're already using jQuery, you can write it very tightly. This would be better:
<button class="divbuttons" data-div="div1">div1</button>
<button class="divbuttons" data-div="div2">div2</button>
...
then you can:
$(document).ready(function(){
$('.divbuttons').click(function() {
var div = $(this).data("div");
$('.divs.selected').removeClass('selected');
$('#' + div).addClass('selected');
});
});
This is an easy one. There is no document.getElementByClass
You have document.getElementById or document.getElementByClassName
There's no such thing as getElementByClass() because multiple elements can have the same class. There's getElementById() (elements have unique ids, or at least they're supposed to) and getElementsByClassName(), which returns an array of all elements that match the class specified.
try
$(document).ready(function () {
$("button[class^=div]").click(function () {
$(".divs.selected").removeClass("selected");
$("#" + $(this).attr("class")).addClass("selected");
});
});
DEMO
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
if (!$(this)) {
$(".dist_on").attr("class", "dist_radio");
}
console.log($(this).attr("class"));
});
I'm using this code to style radio buttons and it sort of works apart from the fact that when I click on another button, the rest don't get dist_on class removed. Can you please tell me what's wrong with it?
Use the .not method:
$(".dist_radio").not(this).attr("class", "dist_radio");
But for your logic, you could just do like below (use addClass/removeClass instead of changing the class attribute directly):
$(".dist_radio").click(function() {
$(".dist_radio").removeClass('dist_on');
$(this).addClass('dist_on');
});
You can use .not():
Remove elements from the set of matched elements.
$(".dist_radio").click(function () {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
console.log($(this).attr("class"));
});
or better using .addClass() and .removeClass() to make your code clearer:
$(".dist_radio").click(function () {
$(".dist_radio").removeClass("dist_on");
$(this).addClass("dist_on");
});
You can use .not() function to exclude the element from the selected set. Passing this to .not() will exclude the current object. You do not need if here to exclude it.
$(".dist_on").not(this).attr("class", "dist_radio");
.not(): Remove elements from the set of matched elements.
Your code would be
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
});
I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.
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/
I am trying to select elements of a (certain class || another class) with the same selector. How can I go about doing that?
Currently, I have:
$(".class1 .class2").each(function(idx, el) {... });
however, that only selects elements that match both classes, not one or the other.
How can I select elements that match one or both of the classes, with the same selector?
Try this
$(".class1,.class2")
http://api.jquery.com/multiple-selector/
$(".class1,.class2").each(function(idx, el) {... });
put a comma within the same selector string.
http://api.jquery.com/multiple-selector/