Question

我在一个小项目中使用Jquery而且遇到了一个问题。

我试图创建一个查看页面的小脚本，并根据标题文本自动为H1标题分配ID，即：

<h1> This is a Test </h1>

到

<h1 id="This_is_a_Test"> This is a Test</h1>

我已经能够选择每个H1，但我还没有能够根据标题文本修改ID。

var $headers = $('.body h1);
$headers.attr("id", not sure exactly how to pass headers text to this?);

我显然非常非常新手，但我会感激一些帮助！谢谢！

Answer 1

首先，您需要使用id的{{1}}方法生成text。

h1

Answer 2

使用带有.attr()的jQuery callback option来阅读标题文本，将其转换为蛇案例，并将其设置为id：

var $headers = $('.body h1');
$headers.attr("id", function() {
  return $(this)
    .text() // get the h1 text
    .trim() // remove spaces from start and the end
    .toLowerCase() // optional
    .replace(/\s/g, '_'); // convert all spaces to underscores
});

console.log($headers[0]);
console.log($headers[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <h1>This is a Test </h1>
  
  <h1>This is a another Test </h1>
</div>

Answer 3

如果您想对页面中的每个h1元素执行此操作，您可以执行以下操作：

$(function() {
  $('h1').each(function() {
    $(this).attr('id', $(this).text().replace(/ /g, '_'))
  });
});

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

该函数将采用每个h1元素，for each它会将id属性的值（使用attr function）设置为text()那个h1元素（用下划线改变每个空格）。

根据标题名称动态地向标头添加ID？

3 个答案: