Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
$.fn.slideUpTransition = function() {
return this.each(function() {
var $el = $(this);
$el.css("max-height", "0");
$el.addClass("height-transition-hidden");
});
};
In jQuery, this.each will iterate over all the matching elements and then apply the function. Here this as a global object holds the class selectors of a div.
jQuery.fn.init [div.custom-dropdown-body.height-transition,
prevObject: jQuery.fn.init(1)]
How can we achieve the same with pure javascript?
I tried doing following but couldn't get as expected:
var obj = this;
for(var i=0; i< obj.length; i++){
// codes
};
return this
Here's a NodeList based example for how $.each works:
NodeList.prototype.each = function(fn) {
for (var i = 0; i < this.length; i++) {
fn.apply(this[i], [i, this[i]]);
}
return this;
};
document.querySelectorAll("p").each(console.log).each(function(i) {
this.textContent = i;
});
<p></p>
<p></p>
<p></p>
(Using the same order of index, element that jQuery uses, as opposed to the JS convention of element, index!)
Edit: added binding of correct this for callback
Related
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
How would I get the index of the chosen element or of 'elems[i]' within the javascript? I know this is a very simple question so any suggestions on a book to buy or course to take would be greatly appreciated. Thanks!
code:
<html>
<body>
<table>
<tr id="subject"><?php
$subjects = array("IT","Programming","Networks");
foreach($subjects as $key => $value) {
echo "<td>"."<a href='index.php' class='column'>".$value."</a>"."</td>";
}
?></tr>
</table>
</body>
<script type="text/javascript">
var elems = document.getElementsByClassName('column');
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function () {
console.log(this.innerHTML);
};
}
</script>
var elems = document.getElementsByClassName('column');
for (var i = 0; i < elems.length; i++) {
let a=i;//the magic happens
elems[i].onclick = function () {
console.log(a);
};
}
See Closures, let, ES6.
Option two (for older browsers):
var elems = document.getElementsByClassName('column');
for (var i = 0; i < elems.length; i++) {
(function(){
var a=i;
elems[i].onclick = function () {
console.log(a);
};
})();
}
You need to put the index into the handlers scope, either trough using block scoping (let, first answer) or by creating a new scope trough an IIFE...
(You need to create an own scope for each handler)
solution 3:
set the dom objects id:
elems[i].id=i;
elems[i].onclick=function(){
alert(this.id);
};
Solution 4:
Get the index dynamically:
alert(elems.indexOf(this));
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 am trying to achieve is a simple remove Class function that receives the target ID and the classname wanting to remove. However I am not sure how can I get the specific classname from the var x using document.getElementById.
See below:
removeClass: function (selector, string) {
var x = document.getElementById(selector);
for ( i = 0; i < x.length; i++ ) {
x[i].classList.remove(string);
}
},
var removeClass = function (strElementId, strClassToRemove) {
var x = document.getElementById(strElementId);
x.classList.remove(strClassToRemove);
}
removeClass('a', 'b');
<div id="a" class="a b c">
test
</div>
Just get element by its id (should be unique in the html page) and use remove with class name key.
To know more about class manipulation using core JavaScript, please visit below link.
http://www.w3schools.com/jsref/prop_element_classlist.asp
First check whether the element have that class or not. Based on that remove it. Try something like this:
removeClass: function (selector, str) {
var x = document.querySelectorAll(selector);
for (i = 0; i < x.length; i++ ) {
if ( $(x[i]).hasClass(str)) {
$(x[i]).removeClass(str);
}
}
}
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
var makeModelYearSelect = document.getElementById("<%= MakeModelYearFilterLB.ClientID %>").control;
var selectedMakeModelYearItems = makeModelYearSelect.get_checkedItems();
var selectedMakeModelYearItemIds = [];
for (var index = 0; index < selectedMakeModelYearItems.length; index++) {
selectedMakeModelYearItemIds.push(selectedMakeModelYearItem[index].get_value(index));
}
Why is this firing back an error of Microsoft JScript runtime error: 'selectedMakeModelYearItem' is undefined?
Mootools won't let me use a simple for...in for iterations.
I've looked at it 6 ways to Sunday so what the heck am I missing?
Because selectedMakeModelYearItem is undefined.
selectedMakeModelYearItems isn't, though.
Maybe you try to call this code berofe page is loaded. In this case select tag that you try to access don't rendered and cannot be accessed from JavaScript. You can try something like
window.addEventListener("load",
(function() {
return function setMakeModelYearFilter() {
var makeModelYearSelect = document.getElementById("<%= MakeModelYearFilterLB.ClientID %>").control;
var selectedMakeModelYearItems = makeModelYearSelect.get_checkedItems();
var selectedMakeModelYearItemIds = [];
for (var index = 0; index < selectedMakeModelYearItems.length; index++) {
selectedMakeModelYearItemIds.push(selectedMakeModelYearItem[index].get_value(index));
}
window.removeEventListener('load', setMakeModelYearFilter, false);
}})()
, false);
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Sometimes you have a function that will work for flat arguments. For example:
send(player,message)
But what if, instead, you have collections of players / messages?
message = ['Welcome!','Check our site for events.']
players = [Player1,Player2,Player3]
Writting for-loops will reduce readability and won't work if you don't know statically if your argument is a collection or object. Rewritting the function is sometimes not viable or too laborous and promotes duplicate code. What is a simplier solution?
You can write a decorator that will transform your function into a function that will take the cartesian product of it's own arguments and call the original function on it.
function send(player,message) {
console.log('To ',player,': ',message);
}
cartesian(send)(['Player1','Player2','Player3'],['Welcome!','Check our site.']);
//Output:
//To Player1 : Welcome!
//To Player1 : Check our site.
//To Player2 : Welcome!
//To Player2 : Check our site.
//To Player3 : Welcome!
//To Player3 : Check our site.
This implements the decorator ("cartesian") on Javascript:
function cartesian_product(arr){
//cartesian_product( [[1,2],[3,4]] ) = [[1,3],[1,3],[2,3],[2,4]]
function partial_product(arr,i){
//partial_product([[1,2],3],0) = [[1,3],[2,3]]
var result = []
for (j=0; j<arr[i].length; ++j){
arr_changed = arr.slice();
arr_changed.splice(i,1,arr[i][j]);
result.push(arr_changed);
};
return result;
};
var result = [arr.slice()];
for (var x=0; x<arr.length; ++x){
for (var y=0; y<result.length; ++y){
if (result[y][x] instanceof Array) {
result.splice.apply(result,[y,1].concat(partial_product(result[y],x)));
}
}
}
return result;
};
function cartesian(func){
//cartesian(func)([1,2],[3,4]) = [func([1,3]),func([1,4]),func([2,3]),func([2,4])]
_this = this;
return function(){
var args_list = cartesian_product(Array.prototype.slice.call(arguments));
var return_values = []
for (var i=0; i<args_list.length; ++i){
return_values.push(func.apply(_this,args_list[i]))
}
return return_values;
}
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a piece of code which will invert all the checkboxes on my form. I have multiple elements (not just checkboxes but also <input type='text'>'s) in it. The reason I need it to be optimised is because it takes about two to three seconds to select all the checkboxes (275 right now).
Here's my code:
function FormInverse() {
var iCheckbox = 1; // Because there are multiple input elements, we need to distinquish the input element ID and the row id
var FormLength = document.FormFacturen.elements.length;
for (i=0; i < FormLength; i++) {
var FormElementType = document.FormFacturen.elements[i].type;
if (FormElementType == "checkbox") {
var Elements = document.getElementsByClassName('row' + iCheckbox); // Alle elementen in de array zetten
var iNumElements = Elements.length;
for (iElement=0; iElement < iNumElements; iElement++) {
if (document.FormFacturen[i].checked == true) {
Elements[iElement].className = "invoice-tr-standard row" + iCheckbox;
} else {
Elements[iElement].className = "invoice-tr-clicked row" + iCheckbox;
}
}
iCheckbox++;
document.FormFacturen[i].checked = !document.FormFacturen[i].checked;
}
}
}
And here is the document.getElementsByClassName function:
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = document.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
I would suggest using jQuery as well.
Try this:
Add a reference to jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" language="JavaScript"></script>
Use this code:
$(':checkbox').each( function() {
$(this).attr('checked', !$(this).attr('checked'));
});
Edited:
Or use this to change the classes as well:
$(':checkbox').each(function() {
var checked = $(this).attr('checked');
if (checked) {
$(this).attr('checked', false);
$(this).addClass('invoice-tr-clicked');
$(this).removeClass('invoice-tr-standard');
}
else {
$(this).attr('checked', true);
$(this).addClass('invoice-tr-standard');
$(this).removeClass('invoice-tr-clicked');
}
});
Final version:
$('#FormFacturen :checkbox').each(function() {
var checked = $(this).attr('checked');
if (checked) {
$(this).attr('checked', false);
$(this).parents('tr').addClass('invoice-tr-clicked');
$(this).parents('tr').removeClass('invoice-tr-standard');
}
else {
$(this).attr('checked', true);
$(this).parents('tr').addClass('invoice-tr-standard');
$(this).parents('tr').removeClass('invoice-tr-clicked');
}
});
Each call to getElementsByClassName is expensive, and it is being called on each pass of your for loop.
In addition to #Geoff's suggestion, you could call document.getElementsByTagName('input'); just once, instead of each time getElementsByClassName is called and cache the result for use within your loop.
That would require making a small modification to your getElementsByClassName function whereby it accepts an array of elements to search through.
document.getElementsByClassName = function(cl, eles) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var len = eles.length;
for (var i = 0; i < len; i++) {
var classes = eles[i].className;
if (myclass.test(classes)) retnode.push(eles[i]);
}
return retnode;
};
function FormInverse() {
// cache all inputs
var inputs = document.getElementsByTagName("input");
...
// later
var Elements = document.getElementsByClassName('row' + iCheckbox, inputs);
You should look into a library like JQuery. It will handle this kind of thing well.
There are a lot of little things you can do to improve your code though. First thing I notice is that your getElementsByClassName function is looping through ALL elements on your page every time you call it. You could change this line:
var elem = document.getElementsByTagName('*');
to just get the input elements:
var elem = document.getElementsByTagName('input');
I am pretty much sure the bottleneck here is the getElementsByClassName function, the browser needs to re-scan the whole html each time to find your element. I suggest you give your elements a unique id id="row1", id="row2", ... instead of a unique class name and use getElementById which is much faster.
var Elements = document.getElementsById('row' + iCheckbox);