Question

我想在所有按钮元素之后插入span标记。

这就是我所拥有的：

    <button>button text 1</button>
    <button>button text 2</button>
    <button>button text 3</button>

这就是我想要的：

    <button><span>button text 1</span><button>
    <button><span>button text 2</span><button>
    <button><span>button text 3</span><button>

我尝试过使用

    var content = $('button').html();
    $('button').empty().html('<span>' + content + '</span>');

但如果我在div上有多个按钮，它会将第一个值复制到剩余的按钮

Answer 1

您可以使用jQuery wrapInner()方法，如：

$('button').wrapInner('<span></span>')

http://api.jquery.com/wrapinner/

Answer 2

$(document).ready(function() {
  $("button").wrapInner("<span></span>");
});

DEMO：https://jsfiddle.net/42gvqu3q/1/ （检查元素以查看结果）

描述：围绕每个元素的内容包装HTML结构在匹配元素集合中。

http://api.jquery.com/wrapinner/

Answer 3

＆＃13;

$('button').each(function(){
    var content = $(this).html();
    $(this).empty().html('<span>' + content + '</span>');
});

＆＃13;

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

＆＃13;

使用$.each jQuery功能：

$('button').each(function(){
    var content = $(this).html();
    $(this).empty().html('<span>' + content + '</span>');
});

文档：http://api.jquery.com/jquery.each/

Answer 4

使用wrapInner（）和每个循环

stage('postbuild display google link') {
    String HTTP_URL= "www.google.com"
    description = "<a href='${HTTP_URL}'</a>" + "google"
    manager.addShortText(description, "black", "white", "1.5px", "white");
}

    var $buttons = $('button');
     $buttons.each(function(){
      $(this).wrapInner( "<span class='new'></span>");
    })

Answer 5

应选择每个按钮并替换innerHTML，如下所示：

 var $buttons = $('button');
 var content = "";
 $buttons.each(function(){
   content = $(this).html();
   $(this).html('<span>' + content + '</span>');
 })

Answer 6

循环并使用它。

Table: User
----
username
fname
lname
address: ref to addresses

Table: Addresses
----------
address line 1
address line 2
city
Zip
state
country

var content = '';
$('button').each(function(index, element) {
  content = $(this).html();
  $(this).empty().html('<span>' + content + '</span>');
});

Answer 7

您要么使用wrapInner，要么您想使用您的代码，您必须使用每个。

<div class"each">
  <button>button text 1</button>
  <button>button text 2</button>
  <button>button text 3</button
</div>
<div class="wrap">
  <button>button text 1</button>
  <button>button text 2</button>
  <button>button text 3</button
</div>

$('.each button').each(function(button) {
  var content = $(this).html();
  $(this).empty().html('<span>' + content + '</span>');
})

$('.wrap button').wrapInner('<span></span>')

https://jsfiddle.net/n300cn52/

按钮后插入跨度

7 个答案: