Передайте дополнительные параметры в jQuery каждый() обратный вызов
Я работаю над приложением, которое будет представлять опросы пользователю. Разметка выглядит примерно так:
<body>
<div class="question" id="q1">
Question 1
</div>
<div class="question" id="q2">
Question 2
</div>
<!-- etc -->
</body>
Я хочу построить объекты JavaScript из DOM с помощью jQuery, поэтому в конструкторе Survey
я просматриваю набор jQuery, используя метод each()
. Проблема в том, что в функции обратного вызова я не могу получить ссылку на объект Survey
, чтобы добавить каждый объект Question
к массиву Survey.questions
. Как получить ссылку на объект Survey
? Есть ли способ передать дополнительный параметр (например, ссылку на объект Survey
) на функцию обратного вызова?
function Survey() {
this.questions = new Array;
$('.question').each(function(i) { (/* Survey object */).questions.push(new Question(this)); });
}
function Question(element) {
this.element = $(element);
}
Ответы
Ответ 1
Вы должны иметь возможность создать ссылку на свое опрос, прежде чем перебирать вопросы.
function Survey() {
this.questions = new Array();
var survey = this;
$('.question').each(function(i) {
survey.questions.push(new Question(this));
});
}
function Question(element) {
this.element = $(element);
}
var survey = new Survey();
$.each(survey.questions, function() {
$("ul").append("<li>" + this.element.text() + "</li>");
});
Рабочий пример на jsfiddle
Ответ 2
Хотя это может быть не актуальным ответом, но поскольку вопрос заключается в том, как передать параметр jQuery каждой функции.
Первый подход: использование частичной функции - подробнее об этом
и из закрывающая библиотека
jsfiddle:
var param = 'extra-param';
var partial = function(fn, var_args) {
var args = Array.prototype.slice.call(arguments, 1);
return function() {
// Clone the array (with slice()) and append additional arguments
// to the existing arguments.
var newArgs = args.slice();
newArgs.push.apply(newArgs, arguments);
return fn.apply(this, newArgs);
};
};
$(['joe','james','rick','kirk']).each(partial (function (index,value) {
alert(arguments.length);
alert(arguments[0]);
},param));
Второй подход
$. Каждая функция может принимать либо 2 параметра Index
, и Element
(которые также можно назвать this
)
ИЛИ
если вам не нужен Index
, тогда вы можете передать Array
в качестве аргумента в $.each, и этот элемент может быть указан как
ПРЕДОСТЕРЕЖЕНИЕ: аргументы предназначены только для внутреннего использования - jQuery
// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
Которое вызовет each: function( obj, callback, args )
затем вызовите callback.apply( obj[ i ], args );
, если вы передадите массив как аргумент
иначе callback.call( obj[ i ], i, obj[ i ] )
;
обратите внимание на разницу между заявкой и вызовом
Пример кода: http://jsfiddle.net/dekajp/yA89R/1/
var param = 'rick';
$(['joe','james','rick','kirk']).each(function (arg1 , arg2 ,arg3) {
//alert('[this: '+this +'] [arg1: '+ arg1 +'] [arg2:'+arg2+'] [param:'+param+']');
},['hello 1','hello 2','hello 3']);
Для справки jQuery Каждый код версии 1.9
// args is for internal usage only
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
},
Ответ 3
Я столкнулся с подобной проблемой. передать параметр каждой функции:
var param1 = "one";
var param2 = "two";
var params = [ param1, param2 ];
$( '#myTable > tbody > tr' ).each(function( index ) {
var param1back = params[0];
var param2back = params[1];
},params);
Ответ 4
//Create extra data
var dataArray = ["A", "B", "C"];
//Send default arguments from jQuery each (index and item) along
//with our new data argument to a named function handler.
$("#myList").children().each(function(jqIndex, jqItem)
{
listItemsHandler(jqIndex, jqItem, dataArray[jqIndex]);
});
//Named function handler accepting 3 arguments.
function listItemsHandler(index, item, data)
{
console.log(index + " " + item + " " + data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id = "myList">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>