Question

我按如下方式向网页添加动态添加按钮：

$('#Container').empty();
for (i = 0; i < l; i++) 
{
     $('#Container').append($('<button id="but'+(i+1)+'" type="button" value="'+i+'">?</button>'));
}
$('#Container').trigger('create');

容器定义如下：

<div data-role="content" id = "Container">

如何在每个按钮的右侧添加标签？

我试过了：

$('#Container').empty();
for (i = 0; i < l; i++) 
{
     $('#Container').append($('<button id="but'+(i+1)+'" type="button" value="'+i+'">?</button>'));
     $('#Container').last().after($('<label>Hello</label>'));
}
$('#Container').trigger('create');

但是这会将所有标签附加到最后。

Answer 1

试试这个：

$('#Container').empty();

for (i = 0; i < 5; i++) {
   $('#Container').append($('<button id="but' + (i + 1) + '" type="button" value="' + i + '">?</button>'));
   $('#Container').append($('<span><label>Hello</label></span><br/>'));
}
$('#Container').trigger('create');

Answer 2

我有一段时间没有做过jQuery Mobile问题。

工作示例：

http://jsfiddle.net/rfmhxdeh/

的JavaScript

$('#Container').empty();
for (i = 0; i < 10; i++) {
    $('#Container').append($('<div class="custom-btn-container"><button id="but' + (i + 1) + '" type="button" value="' + i + ' class="custom-btn"">?</button><label>Hello</label></div>'));
}
$('#Container').trigger('create');

CSS

.custom-btn-container {
    display: flex; /* or inline-flex */
}

.custom-btn-container button {
    margin: 0 2% 20px;
}

.custom-btn-container label {
    line-height: 50px;
}

此示例中的魔术词是：

display: flex;

我的建议是关于它的。

在按钮右侧添加标签

2 个答案:

的JavaScript

CSS