獲取使用jQuery（AJAX）外部HTML文件

Question

我有一個外部HTML文件，該文件只包含一個無序列表與幾個列表元素這樣的列表元素的ID：

<ul> 
    <li id="list-1"></li> 
    <li id="list-2"></li> 
    <li id="list-3"></li> 
    <li id="list-4"></li> 
    <li id="list-5"></li> 
</ul> 

我怎樣才能得到我的主要HTML文件使用jQuery（AJAX）的列表元素without loading them into the DOM的ID。

Answer 1

您可以使用AJAX來從通過他們返回的HTML和循環檢索HTML，然後創建一個jQuery對象得到他們id屬性，像這樣：

$.ajax({ 
    url: '/yourpage.html', 
    success: function(html) { 
    $(html).find('li').each(function() { 
     var id = this.id; 
     // use the id here...   
    }) 
    } 
}); 

或者您可以使用map()建設在id值的數組，這一切都取決於你的使用情況

Answer 2

$('button').click(function(){ 
 
$('li').each(function(){ 
 
console.log($(this).attr('id')); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="list-1">a</li> 
 
    <li id="list-2">b</li> 
 
    <li id="list-3">c</li> 
 
    <li id="list-4">d</li> 
 
    <li id="list-5">e</li> 
 
</ul> 
 
<button>Click Me</button>