Easier multiple value changes with jQuery [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am really in need of this one, because I cann't manually type loads of options for admin panel. Hence I need a quick way to fetch each input/select and add value as I want.
Here's looong sample for one option field:
$("select[name=big_proceed]").val("true");
$("select[name=proceed_action]").val("");
$("input[name=choice_premium]").val("Premium <span>Code</span>");
$("input[name=big_proceed_pts]").val("");
$("#settings_proceed input, #settings_proceed select").each(function () {
databaseData($(this));
});
I thought something like this may work but apparently I was wrong. Here's sample:
$("#settings_proceed :input").each(function () {
$(this)
.eq(0).val("true")
.eq(1).val("")
.eq(2).val("Premium <span>Code</span>")
.eq(3).val("");
databaseData($(this));
});
Any suggestions for me ?

From the jQuery documentation:
.eq(index): Reduce the set of matched elements to the one at the specified index.
Hence your second example doesn't work as intended because $(this) only matches one element (that's the intention behind the .each()). You could rewrite the code like so:
var values = ["true", "", "Premium <span>Code</span>", ""];
$("#settings_proceed :input").each(function(i){
$(this).val(values[i]);
databaseData($(this));
});
However, this approach makes the code hard to read and error-prone because it assumes a fixed order of the HTML elements (what if you change the order of the input fields but forget to adjust the JS accordingly?). So you really should "manually" add IDs to your input elements and select them by their ID and not their index.
As #David Thomas pointed out, some sample HTML would be quite helpful here, but without knowing any further details of what you're trying to do I'd suggest the following:
var values = {
big_proceed: "true",
proceed_action: "",
choice_premium: "Premium <span>Code</span>",
big_proceed_pts: ""
};
$.each(values, function(key, value){
$("#settings_proceed").find("[name='"+key+"']").val(value);
databaseData($(this));
});
That way you can neatly define all the values in one object and let jQuery safely do the rest.

Related

Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I need to know how to check for a CSS Id (or a class) if its enabled or disabled in jQuery. For example, let's say I have two Ids, sectionA and sectionB on some form pointing to two different sections of markup.
Now, I have a common reusable JS function that does some work based on which of the sections was referenced(activated) by the user. Think of user making entries on the some input fields of sectionA or viceversa. So I am trying to do something like this (please pardon my syntax):
function doSomething() {
if $('#sectionA').Enabled { //I know its not real syntax {
var inp = document.getElementById('sectionA');
}
else if ('#sectionB').Enabled {
var inp = document.getElementById('sectionB');
}
}
etc.
Sorry if this is too trivial a question. I know the question is hard to visualize at first but I wish I could draw it out. I certainly appreciate any helpful hints.
jQuery selectors us the same syntax as CSS does, so you can just use the :enabled pseudo-class selector:
if ($('#sectionA:enabled')) { ... }
But, after reading your comments, I'm not sure enabled is what you are looking for. You may want :active, which would be:
if ($('#sectionA:active')) { ... }
You could also write both of these like this:
if ($('#sectionA').is(':enabled')) { ... }
if ($('#sectionA').is(':active')) { ... }
Also, if you are going to use jQuery, why not use it here as well:
document.getElementById('sectionA')
Can just be:
$('#sectionA')
That's because the code you have provided has syntax errors like
. else if ('#sectionB').Enabled
Should be
. else if ($('#sectionB:enabled'))
Use brackets with if else conditions.. And Check the $ sign there, also .Enabled is nothing in jQuery, if it's a check box then use .prop('checked') or .is(':enabled')

assigning same html elements to a multiple variable in jquery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i am curious to know, how can i assign multiple html elements to a single variable in jquery...
for an example if i am having...
$('.some').drags();
$('.some1').drags();
at one instance i want variable drgoff
var drgoff = $('.some').offset().top;
at other instance i want variable drgoff
var drgoff = $('.some1').offset().top;
i am using this drgoff in the function, so now my question is how can i get all that html elements in place of .some when that particular html element is called...
var drgoff is not inside function it is a global variable..
thanx for any help...
it can be done using if else also but that will be too lengthy..
Use jQuery's .add(). var drgoff = $('.some').add('.some1');
Live demo here (click).
Well don't know when you are setting the value for drgoff. If you have a function (as indicated in question), then you can pass it the class name for which you want to get the value like this:
function getDragOffValue(cname){
dragoff = $(cname).offset().top;
}
and use it like:
getDragOffValue(".name");
alert(dragoff);//gets value for elements with class .name
getDragOffValue(".name1");
alert(dragoff);//gets value for elements with class .name1
But I don't understand how your code will behave if you have multiple elements with same class name. It will return the offset().top value for first element in collection of elements with given class. In short $(".name").offset().top is as good as $(".name:first").offset().top.

Point Spending Tool - Difficulties [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I've made this small tool but I'm not sure how to achieve what I need.
I would like it to subtract from the "Points Left" when adding to the others.
(Not going below zero into the negative, only 30 points).
I would also like to prevent going BELOW the initial numbers in "Weapon Power" and "Magic Power".
(I would like to be able to only spend a maximum of 25 points into one "power")
I think it kind of explains itself so maybe I'm just confusing you more.
Any ideas?
DEMO
You need to give your number input elements distinct ids, because when you do document.getElementById, it will only return you the first element with the given ids.
Then, you need to give another distinct ID to the "points left" field for each character, and update that one. To do that, you'll need to pass to add and substract the correct value ( add(warrior, 'weapon'), add(wizard, 'magic')).
You need to be able to get your IDs from your warrior or wizard object, so you could try doing this:
var wizard = {
weapon:"idOfWeaponField", magic:"idOfMagicField", points:"idOfPointsField"
};
where the string values are the ids of your elements.
Then, within your add function, you can access your id like this
function add(character, statName){
var myID = character[statName];
}
and update the correct input value.
EDIT: code here.
I would also like to prevent going BELOW the initial numbers in "Weapon Power" and "Magic Power". >(I would like to be able to only spend a maximum of 25 points into one "power")
Basically, you've seen what I did with the points left, when I said if(pointsVal.value == 0) return; ? You should be able to implement any constraint you like using that.
I modified mine to give an example where the limits are at their initial values.
If you only want to spend a given number of points on one of the powers, you'll have to substract the limit from the current number and return from add() without changing the value if the number exceeds the threshold. That should be pretty easy with what you have now, since you don't have to change the character object to do it.

How to apply substring to every letter in array? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm making an array of textstrings like this:
phone = $(data).find('.tel a')
I would like to apply a substring(8) to every item in the array called phone. Is a for-loop the best way to do it?
phone, as it stands, contains a jQuery object, which is an Array-like Object of DOM elements. If you want to iterate over all of them and get their inner text, applying .substring(8) to each, and building an array out of them, you can use something like this:
var phoneArray = $(data).find(".tel a").map(function (i, el) {
return $(el).text().substring(8);
}).get();
DEMO: http://jsfiddle.net/96HWv/
(in the demo, I had to emulate what data could be, although I'm guessing it is an HTML string in your real code)
You can use the map() method :
phone = phone.get().map(function(e) { return $(e).text().substring(8) });
FIDDLE
You can use the .each() function for this... Something like:
$(data).find('.tel a').each(function() {
$(this).text(function(index,text) {
return text+"substring(8)";
});
});
You can let jQuery do the work for you.
$(data).find('.tel a').addClass('substring');
jQuery will traverse the array of elements returned and add the class to all of them.

creating DOM nodes from arrays [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Note: This is a continuation of another question that I decided were two separate issues that need to be solved. I'm also currently not sure of how exactly to phrase this question, so I will try my best and when I get more clarity I will rephrase my question for future reference.
I'm writing two basic jQuery plugins, $.fn.query and $.fn.build, that sort an array, and create html code to insert into a document, respectively. I'm currently testing it with Vimeo video ID's that I will display videos with.
$.fn.build has three parts. First it wraps every array item with individual containers, the builds them into rows (problem area), then lastly it wraps everything in a container. (every part of this is optional).
Specifically the problem comes from this line: $(tmp).add(newRow); although it is valid javascript.
if ( options.splitBy !== undefined && options.wrapRow !== undefined ) {
var tmp = $([]),
newRow = function(i) {
$(build.splice( i, i + options.splitBy )).wrapAll( options.wrapRow ).parent();
};
for (var i = 0, l = build.length, a = options.splitBy; i < l; i += a) {
$(tmp).add(newRow);
}
build = tmp;
console.log(build);
}
See: http://jsbin.com/upatus/2/edit
I am quite sure that you want to use the function, instead of adding the function itself. Also, you will want to use the same tmp object all over the time, instead of wrapping it into a new jQuery instance and not adding to the original one. Try
tmp.add(newRow(i));
BTW: If you want to build an array, you should use
var tmp = [];
and
tmp.push(…);
Now I've looked at the code from the other question. Both answers are correct, and contain some valid points:
splice is an Array function on jQuery's prototype, and returns an array. (You have fiexd this now)
Your query method returns an array, but should return a jQuery instance for chaining
Your build variable was not initialized, but used
You should really choose whether you want to use arrays or jQuery objects internally in your function, and not mix them.
BTW, you should rename your functions to more descriptive names. "build" and "query" are very vague and may collide with other plugins.

Categories

Resources