Làm thế nào để có được tất cả các liên kết của một danh sách bên trong một div?

Question

Tôi có một mã số với DOM Tree sau:

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

Tôi đang cố gắng để đạt được href của thẻ của tôi. Tôi không thể đạt được nó với bất cứ điều gì tôi đã cố gắng.

Cách tốt nhất để tiếp cận nó với jQuery là gì?

tôi đã cố gắng:

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

mà không may mắn ..

Cảm ơn

EDIT:

Sau câu trả lời nbrooks của, đây là những gì tôi đã cố gắng cho đến nay:

function bindPagination() { 

    console.log("bind"); 

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

EDIT 2:

Xét câu trả lời Syfaro, tôi cũng đã cố gắng :

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

Không may mắn.

EDIT 3: tôi muốn cung cấp thêm thông tin chi tiết liên quan đến chức năng này có thể có một tác động đáng kể sau khi tất cả:

để tải pagination này, tôi đang sử dụng Ajax và tay lái bọc vào một hàm tài liệu sẵn sàng :

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

Bạn có thể nhìn thấy trong get blogposts chức năng mà tôi gọi là BindPagination mà được coi là chức năng này, để ngăn chặn hành vi mặc định và gọi cho nội dung phụ thuộc vào sự bù đắp (hệ thống pagination)

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

lần cuối}); đứng cho phần cuối của tài liệu đã sẵn sàng.

Answer 1

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

này nên tất cả a yếu tố trong khu vực quy định, có được href trong số họ, giả định rằng bạn đã có jQuery và tất cả những thứ tốt thiết lập.

Nếu bạn có nhiều a yếu tố, bạn có thể làm một cái gì đó như thế này:

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

này sẽ in ra mỗi href của mỗi a trong div đó.

Nếu bạn cần ngăn liên kết thay đổi trang, bạn cần thêm trình xử lý nhấp chuột vào các yếu tố a.

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

Điều này sẽ ngăn người dùng bị đưa đến liên kết và nhận được href của liên kết khi được nhấp.

Đây có phải là những gì bạn muốn không?

Answer 2

Chức năng bạn có thể đang tìm kiếm là map. Điều này cho phép bạn lấy một bộ sưu tập jQuery đã cho và chuyển đổi nó bằng cách lấy một thuộc tính cụ thể của từng đối tượng và làm cho phần tử đó trong tập hợp kết quả.

Để thu thập tất cả của href trong mảng của bạn:

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

jsFiddle Demo

Lưu ý: Các child selector (el1 > el2) chỉ hoạt động khi el2 là, tốt, một hậu duệ trực tiếp của el1. Vì vậy, ít nhất một trong các ví dụ của bạn sẽ thất bại vì bạn không khớp với ví dụ đó với cây DOM của mình. Tuy nhiên, console.log($('#blogPagination div ul > li a ').attr("href")); sẽ hoạt động để tìm href (chỉ) thẻ neo đầu tiên, giả sử bạn đã bao bọc nó trong trình xử lý sẵn sàng DOM $(function() { ... });.

Phương pháp children là tương tự, ở chỗ nó sẽ chỉ tìm thấy hậu duệ trực tiếp (trẻ em), chứ không phải cháu, vv Nếu bạn muốn tìm tất cả hậu duệ xuống cây DOM của một yếu tố đặc biệt, sử dụng find để thay thế.

Answer 3

Kiểm tra bảng điều khiển của bạn - vì tôi nghi ngờ có lỗi xung đột hoặc javascript gây ra jQuery không hoạt động.

Báo cáo của bạn là chính xác và nên chọn phần tử bạn yêu cầu.