如何在容器中包围元素?

时间:2014-10-01 14:19:04

标签: javascript jquery

我有一个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

3 个答案:

答案 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);
});

updated jsfiddle

答案 2 :(得分:0)

您可以使用.wrap()

$('[data-hint]').each(function() {
    $(this).prev('label').addBack().wrap('<div>');
});

这将遍历具有data-hint属性的每个元素,在迭代它们时,它会将附带的标签添加到所选元素的堆栈中,并用div包装它们。您可以向该div添加属性以根据自己的喜好进行更改。