如何包圍容器中的元素？

我有一個HTML字符串，它看起來像：用data-hint屬性輸入如何包圍容器中的元素？

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>';

我想SEACH字符串（使用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的label之前和之後input插入<div></div> ...

的的jsfiddle是here

來源

2014-10-01 Mark

只需將「self.form」替換爲「form」即可。這將消除錯誤 – jevgenig 2014-10-01 14:21:19

編輯問題 – Mark 2014-10-01 14:26:20

你有沒有嘗試過使用jQuery .wrap（）和.wrapInner（）？ – trnelson 2014-10-01 14:26:37

試試這個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);

來源

2014-10-01 14:31:48 jevgenig

.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）

來源

2014-10-01 14:32:50 Bergi

您可以使用.wrap()。

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

這將通過具有一個數據暗示屬性的每個元件運行，而迭代它們，這將伴隨標籤添加到選定的元件的堆疊，並用一個div包裹它們兩者。你可以添加屬性到該div來改變它的喜好。

來源

2014-10-01 14:43:10 casraf

非常好！刪除評論。 – Zane 2014-10-01 15:17:04

如何包圍容器中的元素？

回答

相關問題