Question

实际上，我在下面给出了一个代码。

$('p').replaceWith(function() {
  return $('<div>', {
    html: $(this).html()
  })
});

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

实际上，我已将所有<p>代码替换为<div>其工作正常但现在我想在<div>中添加一个类，那么我该如何添加呢？

Answer 1

对生成的元素

使用addClass()方法

return $('<div>', {html:$(this).html()}).addClass('thisClass')

$('p').replaceWith(function() {
  return $('<div>', {
    html: $(this).html()
  }).addClass('thisClass')
});

.thisClass {
  color: red
}

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

Answer 2

在您的函数中，添加class属性，这是最佳做法：

＆＃13;

$('p').replaceWith(function() {
  return $('<div>', {
    html: $(this).html(),
    class: "myClass"
  })
});

＆＃13;

.myClass {color: blue;}

＆＃13;

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

＆＃13;

Answer 3

您也可以在没有replaceWith()的情况下实现此目的。添加此答案可让您了解备选方案，以便在将来的方案中使用它。

$('p').html('<div class="newClass">'+$('p').html()+'</div>');

.newClass{
  color: green;
}

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

Answer 4

如果您想在替换期间将您的课程添加到已更换的div，您可以执行以下操作：

$('p').replaceWith(function() { return $('<div>').addClass("someClass").html($(this).html())});

div.someClass
{
color:green;
}

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

但是如果通过以下句子

但现在我要添加一个类

你的意思是你想在一段时间后将类添加到被div元素替换的p元素，然后你可以为被替换的div添加一些属性，这样你就可以了可以识别您的替换div，例如我会将属性replaced="true"添加到已替换的div以及其他一些我将全部获取它们并添加someClass给他们：

$('p').replaceWith(function() { return $('<div>').attr("replaced","true").html($(this).html())});

过了一会儿其他地方：

$('div[replaced="true"]').addClass("someClass")

工作示例:(我们首先将p代码替换为div，之后我们向我们的正文添加一些div，最后我们将someClass添加到正文已替换div代码：

$('p').replaceWith(function() { return $('<div>').attr("replaced","true").html($(this).html())});

$('body').append($("<div>").html("hello"));
$('div[replaced="true"]').addClass("someClass")

div.someClass
{
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>p1
</p>
<p>p2
</p>
<p>p3
</p>
<div>temp
</div>

如何使用jquery替换类后添加类

4 个答案: