I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();
Related
How can I check if a div has a data-attribute and remove the div if it has that data-attribute, the opposite works like this:
$("div[id='foo']").not('[data-type=edit]').remove();
Remove the not() and use the attribute in the main selector:
$('#foo[data-type=edit]').remove();
If you only want to find the element that has the data-type attribute, regardless of its value, you can use this:
$('#foo[data-type]').remove();
if(typeof $("#foo").attr('data-type') == 'undefined')
{
$("#foo").removeAttr('data-type');
}
If you dont care about the value you can just do
$('#foo[data-type]').remove();
I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});
You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});
you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.
you are sure you need "==" to set the value? or one "="
Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')
i want to find out if any of the elements with same classes has the attribute value that i specified
ex.
if ($('.elem').attr('category') == 'meat') {
alert('');
}
some elements with the same classes can have an attribute: category="fruits" . . becuase I used classes to select the elements, It returns multiple results i want to find out if any of them has ex. the attribute meat
Use attribute selector like this.
$(".elem[category='meat']").length
This will select all the elements with category meat and classname .elem
You can use .is() with attribute equals selector
if ($('.elem').is('[category="meat"]')) {
alert('');
}
How can I change the attribute of an element, depending on another attribute?
For example, I have 2 <a> elements. They both have the class myClass. One of the elements has rel="1" and the other has rel="2". I wish to only change the z-index on the one which has rel=1. How do I do this?
I've tried:
$(".myClass[rel='1']").css("z-index", 10);
But it doesn't work. Cheers.
try this:
$(".myClass[rel='1']").css('display', 'none');
and see if it disappears. Then you will know if it is your selector, or positioning.
As z-index contains a hyphen you have to reference it in camel case:
$(".myClass[rel='1']").css("zIndex", 10);