Change value of h2 to its text-CodePudding

My problem is, I need to change the value of H2 to his own text, but my code are changing all the H2s value to the first H2 text of the page, not their own text.

$(function () {
    $('h2').attr('id', document.querySelector("h2").innerText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<h2>Title 1</h2>

<h2>Title 2</h2>

<h2>Title 3</h2>

CodePudding user response：

This is perfectly achievable in plain JavaScript – since you're already using that – with the following approach:

// using document.querySelectorAll() to retrieve all <h2> elements in the document,
// and then passing that NodeList to NodeList.prototype.forEach() to iterate over
// that NodeList:
document.querySelectorAll('h2').forEach(
  // using an anonymous Arrow function on each node of the NodeList,
  // wherein we assign the text-content of the current <h2> element -
  // after first replacing all strings of white-space with the '-'
  // character to the 'id' property:
  (title) => title.id = title.textContent.replace(/\s /g, '-')
);

h2::after {
  background-color: gainsboro;
  color: honeydew;
  display: block;
  font-size: 0.8em;
  content: '(#' attr(id) ')';
  );

<h2>Title 1</h2>

<h2>Title 2</h2>

<h2>Title 3</h2>

If you would prefer to use jQuery, then of course the following is also possible:

// we select all <h2> elements in the document, and chain the
// collection with the prop() method to update the named ('id')
// property of the current element in the collection:
$('h2').prop('id', function() {
  // here we retrieve the text of the current element,
  // use String.prototype.replace() to replace all white-
  // space characters (\s ) with the '-' character:
  return $(this).text().replace(/\s /g, '-');
});

h2::after {
  background-color: gainsboro;
  color: honeydew;
  content: '(#' attr(id) ')';
  display: block;
  font-size: 0.8em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Title 1</h2>

<h2>Title 2</h2>

<h2>Title 3</h2>

The problem with your own code:

$(function () {
    $('h2').attr('id', document.querySelector("h2").innerText);
});

Is that document.querySelector() returns only the first element in the document (if any) that matches the supplied CSS selector, which is why each <h2> was being assigned the same id, that of the first <h2>.

It's also worth pointing out that an id cannot contain white-space; it must be one single alphanumeric string.

References:

JavaScript:
jQuery:
- prop().
- text().

CodePudding user response：

Use the function version of .attr() to access the specific element

const normaliseId = (val, delimiter = "-") => val.replace(/\s /g, delimiter);

$("h2").attr("id", function () {
  // each element in the collection can be referenced via `this`
  return normaliseId(this.textContent);
});

console.log($("#container").html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="container">
  <h2>Title 1</h2>
  <h2>Title 2</h2>
  <h2>Title 3</h2>
</div>