如何选择所有相同的元素并获取jQuery中的每个id

时间：2017-07-01 01:23:47

标签： javascript jquery html

我不想选择正文中的所有部分标签并获取每个id属性。 我正在使用下面的逻辑：

<body>
  <section id="header"></section>
  <section id="content" ></section>
</body>

我想要实现的理想“幻想”代码：

var select_all_section = $('body * section');
var sec_id = select_all_section.attr('id');

console.log(sec_id);
//OUTPUT: header
//OUTPUT: content

我的实际代码

var select_all_section = $('body > section');
var sec_id = select_all_section.attr('id');

console.log(sec_id);
//OUTPUT: header

3 个答案:

答案 0 :(得分：2)

您是否尝试过.map 

$(function() {
  var select_all_section = $('section');
  var sec_id = select_all_section.map(function() {
    return this.id;
  });
  console.log(sec_id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
</section>
<section id="content">
</section>

答案 1 :(得分：0)

好的，我不知道你为什么需要它，但这里有一种方法可以单独输出它们。

var $ids = $('section');

$ids.each(function(i,e){
  console.log($(e).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header" >
</section>
<section id="content" >
</section>

编辑：实际上，我认为http://api.jquery.com/jQuery.map/会比这个答案更好。

答案 2 :(得分：0)

$("section")将为您提供所有元素的集合。

所以你可以直接用

$("section").css({color:"red", fontSize:"24px"});

或者如果你真的需要这个ID来使用它来做更多有趣的事情......

使用.prop()

.prop( propertyName, function )将访问所需的媒体资源

$("section").prop("id", function(idx, val){
  console.log(val);
});
<section id="header"></section>
<section id="content"></section>
<section id="footer"></section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用.map() 

var sectionIDs = $("section").map(function() {
  return this.id;
}).get();

console.log( sectionIDs.join("\n") );  // Join with newline
console.log( sectionIDs );             // Show as array
<section id="header"></section>
<section id="content"></section>
<section id="footer"></section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用.each()

如果你需要做更多this相关的东西绑定到每个元素，这个方法很有用，但好的，这是一个简单的例子

$("section").each(function() {
  console.log( this.id );  
  // Or using jQuery 
  // console.log( $(this).prop("id") );
});
<section id="header"></section>
<section id="content"></section>
<section id="footer"></section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用纯JavaScript 

Array.from(document.querySelectorAll("section")).forEach( e => console.log(e.id) );
  <section id="header"></section>
  <section id="content"></section>
  <section id="footer"></section>

相关问题
最新问题