Question

我有一些代码几乎完全符合我的要求。它将所有强大的标签更改为样式的h3标签，这是完美的，但对于我的生活，我无法弄清楚要替换的内容＆＃34; .click＆＃34;使其自动运行。我试过了＃34; .ready＆＃34;它在我的jquery中给了我一个错误。

$(document).ready(function(){
    $('strong').click(function(){
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'))
    })
});

Answer 1

我建议直接进入replaceWith()：

// most (if not all) jQuery methods iterate over
// the collection to which they're chained:
$('strong').replaceWith(function () {

  // here 'this' is the individual <strong> element over
  // which the method iterates, and we return the created element:
  return $('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>');
});

＆＃13;

$('strong').replaceWith(function () {
  return $('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<strong>4</strong>

＆＃13;

顺便说一下，在普通的JavaScript中，这很容易实现：

// creating a <h2> element:
var heading = document.createElement('h2'),
// initialising an empty variable:
  clone;

// setting the display and margin properties:
heading.style.display = 'inline';
heading.style.margin = '0';

// using Function.prototype.call() to use
// Array.prototype.forEach() on the array-like
// NodeList returned by document.querySelector():
Array.prototype.forEach.call(document.querySelectorAll('strong'), function(bold) {

  // cloning the created <h2> element:
  clone = heading.cloneNode();

  // setting its innerHTML:
  clone.innerHTML = bold.innerHTML;

  // traversing to the parentNode, and
  // using Node.replaceChild() to replace
  // existing <strong> element with the
  // cloned <h2> element:
  bold.parentNode.replaceChild(clone, bold);
});

＆＃13;

var heading = document.createElement('h2'),
  clone;

heading.style.display = 'inline';
heading.style.margin = '0';

Array.prototype.forEach.call(document.querySelectorAll('strong'), function(bold) {

  clone = heading.cloneNode();

  clone.innerHTML = bold.innerHTML;

  bold.parentNode.replaceChild(clone, bold);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<strong>4</strong>

＆＃13;

参考文献：

JavaScript的：
- Element.innerHTML。
- Node.cloneNode()。
- Node.parentNode。
- Node.replaceChild()。
jQuery的：
- replaceWith()。

Answer 2

您想要使用each()，以便迭代所有这些。

$('strong').each(function(){ ... });

Answer 3

您正在做的是向页面上的所有<strong>元素添加处理程序，只要单击其中一个元素就会触发这些元素。如果您想在文档准备就绪后立即执行替换，请尝试以下操作：

$(document).on('ready', function () {
    $('strong').each(function () {
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'));
    });
});

Answer 4

这应该这样做。

＆＃13;

$(document).ready(function(){
    $('strong').each(function(){
        $(this).replaceWith($('<h3 style="margin:0px;display:inline;">' + this.innerHTML + '</h3>'))
    })
});

＆＃13;

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

＆＃13;

使用.replaceWith更改dom

4 个答案: