Remove all "-" inside select options - javascript

I have in wordpress a list of options, but it generates with sub level menu's automatic a - before it. Now I wanna loop them out but can't get it seems to work.
I targeted my menu items and try to loop out the "-" to remove them.
var $menuitem = $(".hasCustomSelect .menu-item");
$menuitem.filter(function(){
return $.trim($(this).text()) == '-'
}).remove();
small codepen
http://codepen.io/denniswegereef/pen/NGGrgR

If I understand correctly. The problem is you are trying to match the wrong kind of dash - vs —. Try this instead return $.trim($(this).text()) == '—';
http://codepen.io/anon/pen/vNLZyv

I can see a - vs a —, Try copy paste from the codepen or from below code
Also I guess you want to use
var $menuitem = $(".hasCustomSelect .menu-item");
$menuitem.filter(function(){
return $.trim($(this).text()).indexOf('—')>-1;//all values containing `—`
}).remove();
Or if you really want to delete only the single - than
return $.trim($(this).text())=='—'; //the value that is `—`
Updated Code Pen http://codepen.io/anon/pen/wKMeJv

If removing the separator options, is what you wanted, then imtheman has a solution for you.
If you wanted to remove the leading dashes from the menu captions (my first guess on what you need), then you can go with the snippet below:
var $menuitem = $(".hasCustomSelect .menu-item");
$.each($menuitem, function(key, val){
$(val).text($(val).text().replace(/—+ /,''));
});

Related

Replace function not working with javascript

How can I strip the $ and , characters from the following value, the code i am using is not working
var asset_value = second_col.find("input[type=text]").val().replace('$', '');
second_col.find("input[type=text]").val() looks like
$1,080.00
Update:
I am not sure why i am getting voted down! the duplicate solution does not solve my question, nor does any answer below, except for this, very strange!
second_col.find("input[type=text]").val(function(i, val) {
return val.replace(/\$|,/g, '');
});
var asset_value = second_col.find("input[type=text]").val();
You can use regex for this:
second_col.find("input[type=text]").val().replace(/[\$,]/g,'').
Assign this value to variable and use it.

Properly renaming cloned inputs JQuery

I'm attempting to craft my own cloning function that changes the name of cloned inputs so they can be collected by PHP.
on W3C I found this simple function to build from
$("button").click(function(){
$("p").clone().appendTo("body");
});
I modified it to clone a fieldset with multiple inputs and it worked. I took it a step farther to try to make it rename and integer the name attribute of the different input elements and now it doesn't even clone the field.
Here's what I have so far.
$("#p20_01_yes").click(function(){
var num = $('.clonedInput').length,
newNum = new Number(num + 1);
$("#cloner").clone($("input, textarea, select").each().attr('name'+newNum)).appendTo("#page20");
});
I just tried to post a snippet of the HTML but I got a warning telling me the limit is 30,000 characters so here's a js fiddle that shows everything.
https://jsfiddle.net/Optiq/krjztsm2/
I structured the JQuery the way I did because I figured it would be more appropriate to do the renaming inside of the clone function then append the results to the page rather than appending it then going back and separating it from everything else to dig back through... figured that would make more sense to the computer. Is this the right way to look at it?
You were pretty close already. I'm not sure if my answer will work perfectly (seeing that the JSFiddle is pretty messy), but you could just adapt the classes and ids afterwards.
You just need to split your tasks into two parts:
Clone the fieldset
Update the input elements names (and possibly ids as well?)
Here is an example of how this could work:
$("#p20_01_yes").click(function(){
var num = $('.clonedInput').length,
newNum = new Number(num + 1);
var $clonedFieldset = $("#cloner").clone().appendTo("#page20");
$clonedFieldset.find("input, textarea, select ").each(function() {
var $item = $(this);
$item.attr('name', $item.attr('name') + newNum);
});
});

jQuery not function dependency on the value of another control

I have the following code:
$(serialNumbersDDL).children("option:gt(0)").remove();
It will delete all the options except the first one. Now I need to delete all the options except the first one and also not delete the option whose value is equal to the label text. How can I say that with writing limited amount of code?
try
$("option:not(':first')",serialNumbersDDL).filter(function(){
return $(this).val()!=$(this).text();
}).remove();
I'd try
$(serialNumbersDDL).children("option:gt(0)").not(function(){
return $(this.labels).text() == this.value;
}).remove();

each() function returning Null or Objects

Hi I am newbie in programming and I am trying to learn and make it work with each(). Bear with me. I try my best to learn from here and you.
I am trying to go through the item per product in a catalog for the specific prices: either original and sale from the page.
then calculate the % for discount
print discount %
check to compare the percent to color the background: brown, yellow and red.
Now, I test each line to see if it works or not.
salecost = $(this).find('#sale').html(); returns a few nulls before displays amount with dollar signs. Weird couldn't figure that one out. Replace() isn't working right - couldn't get it working. It is supposed to remove dollar sign.
Also, I am not sure how it goes with compare -- do i write statement correctly?
Thank you in advance for the help
var salecost;
var originalcost;
var percentDiscount;
var percent;
function calculate(sale, original)
{
percentDiscount = eval((sale/original)*100);
document.getElementById("percentoff").innerHTML=parseInt(percentDiscount) + '%';
}
$(document).ready(function(index){
$('.item').each(function(){
salecost = $(this).find('#sale').html();
salecost = salecost.replace(/[^\d\.]/g,"");
alert (salecost);
originalcost = $('#sale').html();
originalcost = originalcost.replace(/[^\d\.]/g,"");
alert (originalcost);
percent = calculate(salecost,originalcost);
alert(percent);
if(percent<30)
{
$("div#percentoff").css({"background-color":"brown", "padding":"5px 0"});
}
if(percent<50){
$("div#percentoff").css({"background-color":"yellow", "padding":"5px 0"});
}
if(percent<70){
$("div#percentoff").css({"background-color":"red", "padding":"5px 0"});
}
});
});
This is not required
$(this).find('#sale').html();
You can replace this using
$("#sale").html();
since id will be unique in a document. If you have more than one element with the same id then your HTML is invalid.
Edit
Remove the id from the span tag.
<span class="price">S$319</span>
This will find all the spans[here only 1] with class name price inside the parent div. No need to use .html() here, you can use .text()
$(this).find('span.price').text();
You should move your var statements to within the each function so they're not global.
You don't need to you the eval, (sale/original)*100 will work by it self.
It's better to use consistent style, your calculate function could be written using jquery.
$("#percentoff").html(percentDiscount) + '%');
casting is unnecessary for most cases in javascript, concatenating a number with a string will produce a string.
your calculate function should return percentDiscount;
Instead of using .css() it would be better to use .addClass that way it's easy to undo with .removeClass, the style is all the the style sheet and you can use jquery to select the elements with the class.

jQuery SimpleTree: Add a node programatically

I'm trying to add a new node to an jQuery SimpleTree, but all I seem to be able to get is "sTC.addNode is not a function"...
var simpleTreeCollection = $('.simpleTree').simpleTree({
animate:true,
drag:false,
autoclose: false,
afterClick:function(node){},
afterDblClick:function(node){},
beforeMove:function (destination, source, pos){},
afterMove:function(destination, source, pos){},
afterAjax:function() {},
afterContextMenu:function(node){}
});
simpleTreeCollection.addNode('test', 'test');
Any suggestions what I might be doing wrong? Is there even the possibility to add a node?
Maybe take a look at jsTree
hmm tricky one this and I have to say I dont like the plugin as it uses numerics as id's and w3c states "The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters......."
However to get you working u need to select one of the nodes first in order to add to it like this
//Select first child node in tree
$('#2').click();
//Add new node to selected node
simpleTreeCollection.get(0).addNode(1,'A New Node')
FYI the above code works in the firebug console on their demo page. On your tree ake sure you use a correct selector to highlight the node
I have solved it by editing the addNode funcion. I commented the temp_node.remove(); and added dragNode_destination.after(dragNode_source);
Just like that:
TREE.addNode = function(id, text, callback)
{
var temp_node = $('<li><ul><li id="'+id+'"><span>'+text+'</span></li></ul></li>');
TREE.setTreeNodes(temp_node);
dragNode_destination = TREE.getSelected();
dragNode_source = $('.doc-last',temp_node);
TREE.moveNodeToFolder(dragNode_destination);
// temp_node.remove();
dragNode_destination.after(dragNode_source);
if(typeof(callback) == 'function')
{
callback(dragNode_destination, dragNode_source);
}
};

Categories

Resources