Слияние объектов jQuery
Действительно ли возможно объединить несколько Объектов DOM jQuery в один массив и назвать методы jQuery на всех них?
F.ex:
<button>one</button>
<h3>two</h3>
<script>
var btn = $('button');
var h3 = $('h3');
$([btn,h3]).hide();
</script>
Это не работает. Я знаю, что могу использовать 'кнопку, h3' селектор здесь, но в некоторых случаях у меня уже есть несколько jQuery элементы DOM, и я должен объединить их так, я могу назвать прототипы jQuery на всех них.
что-то как:
$.merge([btn,h3]).hide();
работал бы. Какие-либо идеи?
ОБНОВЛЕНИЕ:
Решенный это. Можно сделать это как это:
$.fn.add.call(btn,h3);
Я собираюсь принять add() предложение что касается указания на меня в правильном направлении.
5 ответов
.add() делает точно, что Вы после.
h3.add(btn).hide();
, Если Вы хотели сделать это немного более удобным для себя с функцией "слияния" как в Вашем вопросе, это могло быть добавлено легко:
$.merge = function(objs) {
var ret = objs.shift();
while (objs.length) {
ret.add(objs.shift());
}
return ret;
};
$.merge([h3, btn]).hide()
$(btn).add(h3).hide();
Не уверенный, если это работает, хотя, документация для добавляют, не упоминает haivng объект jQuery в качестве параметра, но только список элементов, поэтому если это не работает, это должно:
$(btn).add(h3.get()).hide();
$.map может сгладить массивы:
function merge(array_of_jquery_objects) {
return $($.map(array_of_jquery_objects, function(el) {
return el.get();
}));
}
Используйте этого.
<script>
var btn = $('button')[0];
var h3 = $('h3')[0];
$([btn,h3]).hide();
</script>Получите некоторые объекты jQuery:
var x = $('script'),
y = $('b'),
z = $('body');
Создают новый объект jQuery, содержа все другие объекты:
$( $.map([x,y,z], a => [...a]) )
Демонстрация: (откройте консоль своего браузера)
var x = $('script'),
y = $('b'),
z = $('body');
// step 1
// put all the jQuery objects in an Array to prepare for step 2
var step1 = [x,y,z];
console.log(step1)
// using jQuery.map and a callback, extract the actual selector from the iterable
// array item and return it, so the result would be a simple array of DOM nodes
// http://jqapi.com/#p=jQuery.map
var step2 = $.map(step1, a => [...$.makeArray(a)])
console.log(step2);
// convert the javascript Array into jQuery Object (which contains all the nodes)
var step3 = $( step2 )
console.log(step3);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<b></b>