Jak uzyskać wszystkie linki z listy wewnątrz elementu div?

Question

mam kod z poniższego DOM Drzewo:

<div id="blogPagination"> 
    <div class="pagination"> 
     <ul> 
      <li> 
       <a href="/2" >1</a> 
      </li> 
      <li> 
       <a href="/3" >2</a> 
      </li> 
     </ul> 
    </div> 
</div> 

próbuję dotrzeć do mojego href znacznika. Nie mogę tego osiągnąć z niczym, co próbowałem.

Jaki jest najlepszy sposób, aby osiągnąć to za pomocą jQuery?

Próbowałem:

console.log($('#blogPagination div ul > li a ').attr("href"));

console.log($('#blogPagination > a ').attr("href"));

$('#blogPagination').children('a')

console.log($('#blogPagination div ul li a').attr("href"));

bez powodzenia ..

Dzięki

EDIT:

Po odpowiedź nbrooks, oto jest, co starałem dotąd:

function bindPagination() { 

    console.log("bind"); 

    $(function() { 
     var links = $("#blogPagination ul a").map(function(e) { 
     e.preventDefault(); 
      return this.href; 
     }).get(); 
     console.log(links); 
}); 

Edytowanie 2:

Biorąc pod uwagę odpowiedź Syfaro za, ja też próbowałem :

$('#blogPagination').find('a').each(function(e) { 
    e.preventDefault(); 
    console.log($(this).attr('href')); 
}); 

Bez powodzenia.

EDIT 3: Chciałbym podać więcej szczegółów dotyczących tej funkcji, które mogą mieć znaczący wpływ po wszystko:

aby załadować ten paginacji, używam Ajax i kierownicę zawinięte do dokumentu gotowej funkcji :

$(document).ready(function(){ 

    // Get the customer service stats 
    var Content = { 

    init: function() { 

      /* this.getHomePosts(); */ 
      this.getBlogPosts(); 
     }, 

    getBlogPosts: function(offset) { 
     if(offset == undefined){ 
      offset = 0; 
     } 
     // GET the events with JSON 
     $.ajax({ 
      type: "POST", 
      data: {}, 
      url: site_url+"/main/blog/"+offset, 
      dataType: "json", 
      success: function(results) { 
       posts = results["posts"].map(function (blogContent) { 
        if(blogContent.picture != '') { 
         return { 
          Title: blogContent.title , 
          Picture: Content.urlPostPic + blogContent.picture , 
          Video: '' , 
          Text: blogContent.text , 
          Datetime: blogContent.datetime , 
         } 
        } else { 
         return { 
          Title: blogContent.title , 
          Picture: '' , 
          Video: blogContent.video , 
          Text: blogContent.text , 
          Datetime: blogContent.datetime , 
         } 
        } 
       }); 

       pagination = {pagination: results["pagination"]}; 

       var template = Handlebars.compile($('#templateBlog').html()); 
       $('#blogPosts').append(template(posts)); 

       var template = Handlebars.compile($('#templatePagi').html()); 
       $('#blogPagination').append(template(pagination)); 
            // Here we call bindPagination <=== 
       bindPagination(); 
      } 
     }); 
    }, 

}; 

Content.init(); 

można zobaczyć w funkcji BlogPosts Get That nazywam BindPagination który ma być to funkcja, aby zapobiec zachowanie domyślne i wywołać zawartość w zależności od przesunięcia (system stronicowania)

function bindPagination() { 

    console.log("bind"); 


    var links = $("#blogPagination ul a").map(function(e) { 
     e.preventDefault(); 
     return this.href; 
    }).get(); 
    console.log(links); 

    $('#blogPagination').find('a').each(function(e) { 
     console.log("clicked !"); 
     e.preventDefault(); 
     console.log($(this).attr('href')); 

    // var attr = this.attr(); 
     // var id = attr.replace("/",""); 

     // $('#blogPosts').empty(); 
     // $('#blogPagination').empty(); 
     // Content.getBlogPosts(id); 
    }); 
} 
}); 

the last}); oznaczać koniec gotowego dokumentu.

Answer 1

$('#blogPagination').find('a').attr('href'); 

ten powinien znaleźć wszystkie a elementów w określonym obszarze, uzyskać href z nich, przy założeniu, że masz już jQuery i wszystko, co dobre rzeczy skonfigurować.

Jeśli masz wiele a elementy, można zrobić coś takiego:

$('#blogPagination').find('a').each(function() { 
    console.log($(this).attr('href')); 
}); 

To będzie wydrukować każdą href każdego a w tym div.

Jeśli nie chcesz, aby link zmieniał stronę, musisz dodać moduł obsługi kliknięć do elementów a.

$('#blogPagination').on('click', 'a', function(e) { 
    e.preventDefault(); 
    console.log($(this).attr('href')); 
}); 

Będzie to uniemożliwić użytkownikowi podejmowane na link i uzyskać href łącza po kliknięciu.

Czy tego chcesz?

Answer 2

Funkcja, której prawdopodobnie szukasz, to map. Umożliwia to pobranie danej kolekcji jQuery i jej przekształcenie przez zajęcie określonej właściwości każdego obiektu i uczynienie go elementem w wynikowym zbiorze.

zebrać wszystkie href w swojej tablicy:

$(function() { 
    var links = $("#blogPagination ul a").map(function() { 
     return this.href; 
    }).get(); 
    console.log(links); 
}); 

jsFiddle Demo

Uwaga:child selector (el1 > el2) działa tylko gdy el2 jest dobrze, bezpośredni potomek el1. Tak więc przynajmniej jeden z twoich przykładów zakończyłby się niepowodzeniem, ponieważ nie pasowałeś do tego z drzewem DOM. Jednakże, console.log($('#blogPagination div ul > li a ').attr("href")); będzie działał, aby znaleźć href (tylko) pierwszego znacznika zakotwiczenia, zakładając, że owinąłeś go w handler gotowy do DOM $(function() { ... });.

Sposób children jest podobna, że ​​znajdzie tylko bezpośrednie potomków (dzieci), a nie wnuki itd Jeśli chcesz znaleźć wszystkie potomków w dół drzewa DOM danego elementu, należy find zamiast.

Answer 3

Sprawdź konsolę - podejrzewam, że istnieje konflikt lub błąd javascript, który powoduje, że jQuery nie działa.

Twoje wyciągi są poprawne i powinny wybrać żądany element.