如何使用JQuery获取许多类的html？

Question

我有一个JQuery的问题.我的例子:

<div id="one">XXX</div>
<div id="one">YYY</div>
<div id="one">ZZZ</div>

<script>
        a = $("body").find("#one").html();
        document.write(a);
</script>

这只显示XXX.但我想显示XXX,YYY和ZZZ.怎么样？告诉我如何使用.find('#id').html()为一页中具有相同ID的许多元素？

Answer 1

用class而不是id.

ID在HTML页面中应该是唯一的.

$(".one").each(function(index,val){
  document.write($(val).html());
})

HTML:

<div class="one">XXX</div>
<div class="one">YYY</div>
<div class="one">ZZZ</div>

Answer 2

对于多个元素具有相同的ID并且使得与js一起使用的标记不是很好的做法.

虽然你可以这样做:

var arr = $('div[id="one"]').map(function(){
    return this.textContent;
}).get();

document.body.innerHTML = '<pre>' + arr + '</pre>'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">XXX</div>
<div id="one">YYY</div>
<div id="one">ZZZ</div>

注意:

我仍然建议不要使用此代码.这只是为了证明您可以通过这种方式获得它.

最好将id属性更改为class并使用它.

var arr = $('.one').map(function(){
    return this.textContent;
}).get();

document.body.innerHTML = '<pre>' + arr + '</pre>'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">XXX</div>
<div class="one">YYY</div>
<div class="one">ZZZ</div>