在jQuery中的所需元素之后添加类

Question

我想在jQuery中执行addClass，

当我尝试下面的代码时，它会让我感觉像是图像1

 $('#contineButton').html('Continue').addClass('fa fa-chevron-right');
 $('#contineButton').html('Continue').after().addClass('fa fa-chevron-right');

但是，我想得到如下图2所示的结果

原始按钮代码：

<button type="button" class="btn btn-success next-step" id="contineButton">
                ${vo.continueButtonText} <i class="fa fa-chevron-right"></i>
</button>

Answer 1

你正在使用after（），你应该使用append（）

select *
from (
    select distinct on (u.id)
        u.id, u.first_name, u.last_name, p.page_text, i.item_text, c.club_text
    from
        user u
        left outer join page p on p.user_id = u.id
        left outer join item i on i.user_id = u.id
        left outer join club c on c.user_id = u.id
    where u.class = 'Senior' and u.college = 'University'
    order by u.id, p.created_at desc, i.created_at desc, c.created_at desc
) s
order by last_name, first_name;

说明：

你在第一次尝试时使用了html-＆gt; addClass，将类添加到当前对象（按钮），在第二次尝试（使用after）将尝试在之后插入的空元素中执行此操作。 $('#contineButton').html('Continue').append('<i class="fa fa-chevron-right"></i>'); 完全替换了按钮的内容，因此html不再存在。

Answer 2

试试这个：

document.getElementById('contineButton').insertAdjacentHTML('beforeend', '<i class="fa fa-chevron-right"></i>');

但它可以通过CSS实现。

Answer 3

要在标记之前添加文本，您需要使用.before jquery函数：

$('#contineButton i').before('Continue');

对于您的情况，您需要用新文本字符串替换文本：

$('#contineButton').contents()[0].remove();
$('#contineButton i').before('Continue');

Answer 4

编辑：这只适用于你正在使用 Bootstrap

您是否有理由尝试使用jQuery实现此目的？

应该使用此html / css代码。

＆＃13;

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button type="button" class="btn btn-success btn-lg">
  Button <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 5

<button type="button" class="btn btn-success next-step" id="contineButton">${vo.continueButtonText} <i class="fa fa-chevron-right"></i>
</button>



$(document).ready(function() {
   $('#contineButton').contents().filter(function() {
                console.log(this)
            return this.nodeType == 3;
        })[0].nodeValue = "The text you want to replace with"
});

JSfiddle