Currently I'm using this minor bit of javascript to remove a small list of properties from a single page.
<script>
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes');
$('p').remove('.field-description');
$('p').remove('.field-link-target');
$('p').remove('.field-xfn');
$('p').remove('.link-to-original');
});
</script>
Being quite/really new with javascript I was wondering if a snippet like this can be even more optimized.
In example to something like this
<script>
jQuery(document).ready(function ($) {
$('p')array.remove('.field-css-classes', '.field-description', '.field-link-target', '.field-xfn', '.link-to-original');
});
</script>
(which, as you can tell, isn't working)
Include the commas in the string....
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');
});
example at http://jsfiddle.net/gaby/B4q2a/
jQuery selectors allow for comma separated selections
jQuery(function ($) { //aliasing document.ready shortcut
$('p').remove('.class1, .class2, .class3')
});
Really easy, use some simple CSS in your selector
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');
Since, in your example, you only removing classes of the p tags and you're using jquery, you can use jquerys removeClass method. According to the API, you can specify several classes there, like so:
$('p').removeClass('class1 class2 class3');
So, no commas seperating the class names and no leading dots.
Related
I've got this following code:
<script type="text/javascript">
$(document).ready(function(){
$('.sample1').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>
It adds class so I can get some animations with mouse click event.
I have some more classes in HTML like 'sample2', 'sample3', etc. and would like to add exactly the same animations (classes of course has different content).
I know one solution, namely just add in same code n-times, but change class for each block of code. Is there a shorter way? I thought maybe something with arrays, not sure. I'm not really good in JS, it's like my first time ;)
You can just group the classes, separated by commas. Example :
$('.sample1, .sample2, .sample3').click(function(){
You can edit your code to take multiple selectors.
<script type="text/javascript">
$(document).ready(function(){
$('.sample1, .sample2, .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>
Simply use multiple selectors:
$('.sample1, .sample2 , .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
You could try
$('*[class*="sample"]')
This is the source
You can use css selectors:
Catch the elements which have classes started with 'sample':
$('[class^=sample]').on('click',function(){
//Do something
});
Catch the elements which have classes ended with 'sample':
$('[class$=sample]').on('click',function(){
//Do something
});
To find more information about css selectors:
https://www.w3schools.com/cssref/css_selectors.asp
so I have this function below...
<script>
$('.tile').on('click', function () {
$(".tile").addClass("flipOutX");
setTimeout(function(){
$(".tile-group.six").load("musability-musictherapy-company-overview.html");
}, 2000);
});
</script>
I basically want to change the css attributes of tile-group.six to have a different margin. Any ideas how I might go about this ?
you should take a look at the .css() function of jQuery
like
$(".tile-group.six").css('margin-left', '50px');
and so on
$(".tile-group.six").css({margin:"0"});
This should be what you're after.
As Phylogenesis pointed out in his comment on the below answer, this method can be used to change multiple CSS values at once using a comma delimiter e.g.
$(".tile-group.six").css({margin:"0", padding:"0"});
I have four article tags in my html page with the class col. Inside each article I have a div with the class heading. Inside of that I have an img tag.
I'm trying to iterate through each artcle and remove that image tag and replace with some different html.
This in Wordpress, hence the funky jquery function wrapper.
Right now im just trying to get the finding and replacing working (below) - I haven't attempted the different code for each article bit yet. I can't figure out why the below doesn't work.
(function ($) {
$(document).ready(function() {
$('article.col').each(function(el) {
$((el).find('heading img').replaceWith('<newtag>somecode</newtag>'));
});
});
}(jQuery));
When calling each, the function value are function(index, element). So right now, you are trying to search a number with $(el), try $(this) or add an other argument to your function.
also, the dot is missing for the class heading
$('article.col').each(function(index, el) {
$(el).find('.heading img').replaceWith('<newtag>somecode</newtag>');
});
or
$('article.col').each(function() {
$(this).find('.heading img').replaceWith('<newtag>somecode</newtag>');
});
(function ($) {
$(document).ready(function() {
$('article.col').each(function(el) {
$(this).find('heading img').replaceWith('<newtag>somecode</newtag>');
});
});
}(jQuery));
Btw, the jQuery wrapper is to prevent conflicts with other libraries using the $ symbol.
There are a few problems with the syntax,
$(el.find('heading img').replaceWith('<newtag>somecode</newtag>'));
should be
$(this).find('heading img').replaceWith('<newtag>somecode</newtag>');
see this fiddle:
http://jsfiddle.net/5bEq7/1/
I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis
Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.
You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();
just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)
Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...
You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle
function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>
This seem like long way of doing things, is it possible to dynamically assign numbers to ids?
$(function () {
$('#Button1').click(function(){
$('#RegularExpressionValidator1, #RegularExpressionValidator2, #RequiredFieldValidator1, #RequiredFieldValidator2, #RequiredFieldValidator3, #RequiredFieldValidator4, #RequiredFieldValidator5, #RequiredFieldValidator6, #RequiredFieldValidator7, #RequiredFieldValidator8, #RequiredFieldValidator9').css("display", "block");
});
});
These are .NET generated ids which I don't have access to.
You can use an "attribute starts with" selector:
$("[id^='RegularExpressionValidator']").css("display", "block");
From the jQuery docs:
This selector can be useful for identifying elements in pages produced
by server-side frameworks that produce HTML with systematic element
IDs. However it will be slower than using a class selector so leverage
classes, if you can, to group like elements.
Have a look at the attributes starts with selector. Using it, you can simply do this:
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});
This will select all elements with an ID starting with RegularExpressionValidator. You may want to specify the element type, as well as a container to look in to select fewer elements.
You may also want to use $.show() instead of $.css():
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').show();
try
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});