我有一个html字符串,看起来像:
var form = '<form data-hint="blah">' +
'<label for=\"password0\">Password0</label>' +
'<input type=\"password\" name=\"password0\" id=\"password0\" data-hint=\"Please enter your Password 0\" />' +
'<label for=\"password1\">Password 1</label>' +
'<input type=\"password\" name=\"password1\" id=\"password1\" data-hint=\"Please enter your Password 2\" />' +
'</form>';
我希望为具有data-hint
属性的输入搜索字符串(使用Jquery,但对其他选项开放)。然后,我想将找到的输入及其随附的标签包围在div容器中。因此,例如,打印出来的上面的字符串应该像:
<form data-hint="blah">
<div>
<label for=\"password0\">Password0</label>
<input type=\"password\" name=\"password0\" id=\"password0\" data-hint=\"Please enter your Password 0\" />
</div>
<div>
<label for=\"password1\">Password 1</label> +
<input type=\"password\" name=\"password1\" id=\"password1\" data-hint=\"Please enter your Password 2\" />
</div>
</form>
这是我的代码:
$(form).find('input[data-hint]').each(function() {
id = $(this).attr('id');
//put <div> before the label
form = $(self.form).find('label[for=' + id + ']').before('<div>').parents('form')[0].outerHTML;
//put the closing div after the input
form = $(self.form).find('input#' + id).after('</div>').parents('form')[0].outerHTML;
});
但最终Jquery在<div></div>
之前和label
之后插入input
...
jsfiddle是here
答案 0 :(得分:0)
试试这个JSFiddle:
var form = '<form data-hint="blah">' +
'<label for=\"password0\">Password0</label>' +
'<input type=\"password\" name=\"password0\" id=\"password0\" data-hint=\"Please enter your Password 0\" />' +
'<label for=\"password1\">Password 1</label>' +
'<input type=\"password\" name=\"password1\" id=\"password1\" data-hint=\"Please enter your Password 2\" />' +
'</form>';
var id, self = this;
var $form = $(form);
$form.hide().appendTo(document.body)
$form.find('input[data-hint]').each(function() {
id = $(this).attr('id');
$form.find("label[for="+id+"]").wrap("<div></div>");
}).html();
console.log($form.get(0).outerHTML);
答案 1 :(得分:0)
.before('<div>') … .after('</div>')
这不是jQuery的工作方式。它不会操纵html标记,而是操作DOM - 你不能只是将标记片段插入其中。相反,您需要创建一个新元素,将其放在输入的位置,然后将输入和标签移动到其中:
$(form).find('input[data-hint]').each(function() {
var div = $("<div>").insertBefore(this);
div.append(this.labels).append(this);
});
答案 2 :(得分:0)
您可以使用.wrap()
。
$('[data-hint]').each(function() {
$(this).prev('label').addBack().wrap('<div>');
});
这将遍历具有data-hint属性的每个元素,在迭代它们时,它会将附带的标签添加到所选元素的堆栈中,并用div包装它们。您可以向该div添加属性以根据自己的喜好进行更改。