使用jQuery(AJAX)获取外部HTML文件列表元素的ID

Question

我有一个外部HTML文件，它只包含一个无序列表，其中包含一些列表元素，如下所示：

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

如何使用(AJAX)获取主HTML文件的列表元素的without loading them into the DOM的without loading them into the DOMID。

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>

​