I need to remove the prefix 'sidr-class-' from all the classes inside the 'sidr-inner' parent div. Sidr provides an option to remove all the prefixes, but it removes prefixes from ID's as well. I want to remove only the class prefixes. The HTML is as follows:
<div class="sidr-inner">
<div class="sidr-class-col-sm-12">
<h2>Search by location</h2>
<form>
<input type="search" class="sidr-class-form-control" placeholder="Your location / postal code">
<button type="submit" class="sidr-class-btn sidr-class-btn-default">Search</button>
</form>
</div>
</div>
At the moment I'm using the following jQuery snippet to search and add classes, but it's not convenient to do it with a large number of classes.
$(document).ready(function(){
if($('div').hasClass('sidr-class-col-sm-12')) {
$('.sidr-class-col-sm-12').addClass('col-sm-12');
}
});
Anyone have an idea how to get this done using jQuery or Javascript? Thanks in advance!
you can try this code:
$(document).ready(function(){
$('.sidr-inner [class*="sidr-class"]').each(function(){
var old_classes = $(this).attr('class');
old_classes = old_classes.replace(/sidr-class-/g, '');
$(this).attr('class', old_classes);
});
});
or this code:
$(document).ready(function(){
$('.sidr-inner [class*="sidr-class"]').each(function(){
$(this).attr('class', change_class);
});
});
function change_class(i, v)
{
return v.replace(/sidr-class-/g, '');
}
to solve your problem.
Related
I have a list of divs on a page. I have a filter system that fills in a 'data-' element with a possible list of values.
Example:
<div data-myvalues="value1,value2,value3"></div>
<div data-myvalues="value2,value3"></div>
<div data-myvalues="value1,value2"></div>
<div data-myvalues="value1,value3"></div>
Then I have some jQuery that tries to filter based on some selections that include the values in the data-myvalues attribute. However, the jQuery filter does not quite work because I think it sees the values as including the comma (,) in the value.
How, in jQuery, would I filter based on an if the divs include the values or not. I am currently using the jQuery
$("div[data-myvalue*='value1']").show();
But it seems to now quite work for some reason it will work if the data-myvalues only has one value in it, the jQuery works, but if there are multiples separated by a comma, the jQuery does not work.
I have a JS fiddle here with a simple sample code I was messing with to get the proof of concept to work.
https://jsfiddle.net/ebz3cmjn/1/
Is there a better way to list values on an element then filter them?
Thanks in advance.
You can try something like this:
$(document).ready(function() {
$.each($('div'), function(i, v){
var values = $(v).data('myvalues');
if(values.indexOf('value1') != -1) {
$(v).show();
} else {
$(v).hide();
}
})
});
And html content with data values:
<div data-myvalues="value1,value2,value3"></div>
<div data-myvalues="value2,value3"></div>
<div data-myvalues="value1,value2"></div>
<div data-myvalues="value1,value3"></div>
Hope this helps.
The data attribute takes JSON object which you can take advantage of.
Given the following element:
<input data-nations='["anothernation", "nationman", "country"]' type="text" value="Germany">
You could filter the desired elements based on the target value:
var targetNation = "nationman";
$("input[data-nations]")
.filter(function () {
// Returns the list as array
return $(this).data("nations").indexOf(targetNation) > -1;
})
.css("background-color", "blue");
Note the two differences between the quotes:
// will parse correctly
data-nations='["anothernation", "nationman", "country"]'
// will NOT parse correctly since it will be treated as plain text
data-nations="['anothernation', 'nationman', 'country']"
Try with .not() like the following way:
$(document).ready(function(){
$("input[data-me*='nationman']").css("background-color", "yellow");
$("input").not("[data-me*='nationman']").css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman,country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>
You can also loop through all elements with .each():
$(document).ready(function() {
$('[data-myvalues]').each(function(){
var values = $(this).data('myvalues');
if(values.includes('value1'))
$(this).show();
else
$(this).hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-myvalues="value1,value2,value3">value1,value2,value3</div>
<div data-myvalues="value2,value3">value2,value3</div>
<div data-myvalues="value1,value2">value1,value2</div>
<div data-myvalues="value1,value3">value1,value3</div>
Checkout the snippet;
I have modified you code a litte bit, hope this will help to get your answer;
This is a little bit tricky answer, but you can easily understand the code
$(document).ready(function(){
var el = $('input');
el.each(item =>{
var attr = el[item].dataset
if(attr.me.match(/nationman/)){
el[item].setAttribute('style', 'background-color:yellow')
}else{
el[item].setAttribute('style', 'background-color:red')
}
})
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman, country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>
</body>
</html>
Try This I think it will work
$(document).ready(function(){
$("input[data-me*='nationman']").css("background-color", "yellow");
$("input").not("[data-me*='nationman']").css("background-color", "red");
});
I will add in the automatic ID selector A, but could not for more than one selector.
I created the code like this:
<div class="comment_name"><a id="testing" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing" href="http://test.blogspot.com">Yogi</a></div>
<script>
var ksDOM=document.getElementById('testing').href;
var sprit=ksDOM.split(".")[1]
$(".comment_name a").attr("href",sprit);
</script>
Please help me. Below is an example of the full code:
http://www.kangsigit.com/p/editor.html?filename=not_work
IDs should be unique. You can rather use same class name and then class selector to target them. Also you can use callback function of .attr() to set new attribute value:
$(".comment_name a").attr('href',function(e){
return $(this).attr('href').split(".")[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="comment_name"><a id="testing_1" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing_2" href="http://test.blogspot.com">Yogi</a></div>
I am trying to remove the word "Quantity" from below and I think I am close but obviously something is off since it's not working.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label>Quantity</label>
With:
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label[for="Quantity"]').css('display', 'none').remove();
});
</script>
Try doing it with pure js after adding an id.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label id ="text">Quantity</label>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("text").innerHTML = "";
});
</script>
Your label needs an id. In this example, I'll use "quantity" as the id.
$('label[id="quantity"]').hide();
This will work but this will apply the style to all labels.
$('label')
Using Pure JavaScript is best though.
Try this $('label').html('');.
$('label[for="Quantity"]') will not retrieve <label>Quantity</label> since it doesn't have the attribute for. Just use $('label') or $('.Label label') and it will work.
Try this if you want to remove the label element itself:
var labels = $('label');
if( labels.text() == 'Quantity' ){
labels.remove();
}
To just remove the word Quantity without removing the label element:
labels.text('');
If you want to remove its parent:
labels.parent().remove();
Also to remove the parent's parent, the <div class="DetailRow"> use this:
labels.parent().parent().remove();
JSFiddle
You can use plain javascript and existing markup with querySelector:
var el = document.querySelector('.DetailRow .Label label');
if (el) {
// do stuff
}
If you want to remove the content, then:
el.textContent = '';
If you want to remove the element, then:
el.parentNode.removeChild(el);
and so on…
I think you can check the label value, and remove the label if the value equals to "Quantity"
Try this:
<div class="DetailRow">
<div class="Label">
<label>Quantity</label>
</div>
</div>
And the script:
$(document).ready(function(){
$(".DetailRow label:contains('Quantity')").hide();
});
http://codepen.io/Himechi90/pen/rOJYjX
Thank you Griffith! This worked perfectly. Full code for anyone trying to remove the quantity and quantity box from only some of your products on bigcommerce. Note that you need to create a separate product template and add this below %%Panel.Header%%
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label').filter(function() { return $(this).text() === "Quantity"; }).remove();
});
</script>
Note also that your values for #text_qty_ etc may change depending on your template.
Thank you all for taking the time to help me!
These are some input fields which i need to remove, but i am not able to remove the label tag
<label class="prfx-row-title">Unique Selling Proposition </label>
<div class="prfx-row-content">
<input type="text" name="dynamic_usp[0][text]" placeholder="unique selling proposition " value="testing hello world" />
<span class="remove button">Remove USP</span>
</div>
$(".remove").live('click', function() {
$(this).parent().remove();
$(this).parent().prev('label.prfx-row-title').remove();
});
Now only the div is remove but not the label?
Anyone?
That's because when removing the div, it is no longer in the DOM, so the label is not a sibling anymore. remove the label first, then the div:
$(".remove").live('click', function() {
$(this).parent().prev('label.prfx-row-title').remove();
$(this).parent().remove();
});
Or better :
$(".remove").live('click', function() {
$(this).parent().prev('label.prfx-row-title').remove()
.end().remove();
});
You can't remove prev() from something that is no longer there... so the easiest fix is just to rearrange the order...
$(".remove").live('click', function () {
$(this).parent().prev('label.prfx-row-title').remove();
$(this).parent().remove();
});
Also, if possible you might want to update the version of jquery you are using and use on() instead of live(). live() has been deprecated since 1.7 and removed since 1.9
JSFiddle
You could also consider changing your DOM to something like...
<div class="prfx-row">
<label class="prfx-row-title">Unique Selling Proposition</label>
<div class="prfx-row-content">
<input type="text" name="dynamic_usp[0][text]" placeholder="unique selling proposition " value="testing hello world" /><span class="remove button">Remove USP</span>
</div>
</div>
and that way you could just do..
$(this).closest("prfx-row").remove();
JSFiddle
I have a couple of .handlebars templates that load into a handlebars default layout, using handlebars as the view engine for node.js
The templates load into the body tag using a {{{ body }}} html escape:
<body>
{{{ body }}}
</body>
When involving divs from the templates..why do jQuery display/hide effects work this way:
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv" style="display:none;"></div>
$(document).ready(function () {
$("#theBtn").change(function() {
$(".theDiv").slideToggle();
});
});
But this way only works if the HTML is directly written in the default layout, not from templates:
.hide {
display: none;
}
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv hide"></div>
$(document).ready(function () {
$("#theBtn").on('click', function () {
var $when = $(".theDiv");
$when.slideToggle();
$(".theDiv").not($when).slideUp();
});
});
I think you have duplicated id for the input elements. Since id must be unique, you need to use class instead:
<input type="checkbox" class="theBtn" />
After that, you need to target only the previous sibling .theDiv of parent label of your clicked input, currently you've targeted all the .div, so you can use:
var $when = $(this).parent().prev();
instead of:
var $when = $(".theDiv");
Fiddle Demo
jQuery
$(document).ready(function () {
$(document).on("change","#theBtn",function () {
var $when = $(".theDiv");
$when.slideToggle();
$(".theDiv").not($when).slideUp();
});
});
Hope this is what you are looking for...!!