Получить все hrefs как массив в jQuery

Мой код выглядит так:

<ul id = "ulList">
  <li class = "listClass" id = "id1"><a href = "http://link1">Link 1</a></li>
  <li class = "listClass" id = "id2"><a href = "http://link2">Link 2</a></li>
  <li class = "listClass" id = "id3"><a href = "http://link3">Link 3</a></li>
</ul>

Сейчас мне нравится получать следующее:

Все ссылки в виде массива

Все идентификаторы li в виде массива

Может кто-то помочь мне, пожалуйста?

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
10
0
29 310
8

Ответы 8

Это должно сработать.

var ids = [],
    hrefs = []
;   
$('#ulList')
    .find('a[href]')  // only target <a>s which have a href attribute
        .each(function() {
            hrefs.push(this.href);
        })
    .end()
    .find('li[id]')   // only target <li>s which have an id attribute
        .each(function() {
            ids.push(this.id);
        })
;

// ids = ['id1', 'id2', 'id3']
// hrefs = ['http://link1', 'http://link2', 'http://link3']
var ids = new Array();
var hrefs = new Array();
$('#ulList li').each(function(){
  ids.push($(this).attr('id'));
  hrefs.push($(this).find('a').attr('href'));
})
var links = [], ids = [];
var $ul = $('#ulList');
var $lis = $ul.children('li');
var $as = $lis.children('a');

for(var count = $lis.length-1, i = count; i >= 0; i--){
    ids.push($lis[i].id);
    links.push($as[i].href);
}

Наткнулся на этот вопрос и получил более многоразовый ответ:

$.fn.collect = function(fn) {
    var values = [];

    if (typeof fn == 'string') {
        var prop = fn;
        fn = function() { return this.attr(prop); };
    }

    $(this).each(function() {
        var val = fn.call($(this));
        values.push(val);
    });
    return values;
};

var ids = $('#ulList li').collect('id');
var links = $('#ulList a').collect('href');

Вы также можете передать функцию в collect следующим образом:

var widths = $('#ulList li').collect(function() {
    return this.width();
});

Я знаю, что это устарело, но, поскольку мне нравятся единственные строки, которые позволяет писать jQuery, я подумал, что добавлю их:

var allLinks = $('#ulList a').map(function(i,el) { return $(el).attr('href'); }).get();
var allIds = $('#ulList li').map(function(i,el) { return $(el).attr('id'); }).get();

+1 Но allLinks и allIds - это объекты типа массивов jQuery, а не настоящие массивы javascript. Чтобы вернуть реальные массивы javascript, нужны allLinks = $.makeArray(allLinks); и allIds = $.makeArray(allIds);

Jose Rui Santos 08.02.2013 15:34

Вам не нужно использовать $.makeArray(), вы можете просто вызвать .get() после map()

Rory McCrossan 15.10.2017 23:05

Если вам нравятся одинарные вкладыши, и вам не нравится создавать экземпляр пустого массива.

[]
  .slice
  .call($('#ulList a'))
  .map(el => el.getAttribute('href'))

Тот же код, что и Grimace, но в ES6

const allLinks = $('#ulList a').map((i,el) => $(el).attr('href')).get();
const allIds = $('#ulList li').map((i,el) => $(el).attr('id')).get();

Я пришел искать однострочный. Вот что я придумал:

var hs=[]; $('a').each(function(i,a){hs.push(a.href);}); hs;

Другие вопросы по теме