Obtenez tous les HREF comme un tableau dans jQuery

Question

Mon code ressemble à ceci:

<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> 

Maintenant, je tiens à obtenir les éléments suivants:

Tous les liens comme un tableau

Tous les ids de li comme un tableau

Quelqu'un peut-il m'aider s'il vous plaît?

Answer 1

Cela devrait fonctionner.

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'] 

Answer 2

 
var ids = new Array(); 
var hrefs = new Array(); 
$('#ulList li').each(function(){ 
    ids.push($(this).attr('id')); 
    hrefs.push($(this).find('a').attr('href')); 
}) 

Answer 3

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); 
} 

Answer 4

Nous sommes tombés sur cette question et est venu avec une réponse plus réutilisable:

$.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'); 

Vous pouvez également passer une fonction dans Collect comme ceci:

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

Answer 5

Je sais que c'est vieux, mais comme j'aime les oneliners que jQ uery vous permet d'écrire, je pensais que je l'ajoute:

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(); 

Answer 6

Si vous aimez un liners et déteste avoir à instancier un tableau vide.

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