Question

我有一个通过CMS生成的表单，我需要包装输入及其标签以包含它们在div中。这是我现在的HTML：

<p><strong>Heading One</strong></p>
<p>Title One</p>
<input type="text" size="25" name="Title1" value="">
<br/>
<p>Title Two</p>
<input type="text" size="25" name="Title2" value="">
<br/>
<p>Title Three</p>
<input type="text" size="25" name="Title3" value="">
<br/>
<p>Title Four</p>
<input type="text" size="25" name="Title4" value="">
<br/>

这是我希望实现的目标：

<p><strong>Heading One</strong></p>
<div class="wrapper">
     <p>Title One</p>
     <input type="text" size="25" name="Title1" value="">
</div>
<br/>
<div class="wrapper">
     <p>Title Two</p>
     <input type="text" size="25" name="Title2" value="">
</div>
<br/>
<div class="wrapper">
     <p>Title Three</p>
     <input type="text" size="25" name="Title3" value="">
</div>
<br/>
<div class="wrapper">
     <p>Title Four</p>
     <input type="text" size="25" name="Title4" value="">
</div>
<br/>

我在这里试过这段代码来实现这个目标：

$('form > p').each(function(){
    $(this).next('input[type="text"]').andSelf().wrapAll('<div class="wrapper"/>');
});

但它没有用，因为它还用包装器包装了Heading p。有没有办法实现我想要做的事情？

Answer 1

$('p').not(':first-of-type').each(function() {
    var that = $(this);
    var div = '<div class="wrapper"></div>';
    that.next().addBack().wrap(div);
});

Answer 2

$(function() {
    $('input').each(function() { 
        $(this).prev().addBack()
        .wrapAll( $('<div/>',{class:'wrapper'}) );
    });
});

＆＃13;

$(function() {
    $('input').each(function() { 
        $(this).prev().addBack()
        .wrapAll( $('<div/>',{class:'wrapper'}) );
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Heading One</strong></p>
<p>Title One</p>
<input type="text" size="25" name="Title1" value="">
<br/>
<p>Title Two</p>
<input type="text" size="25" name="Title2" value="">
<br/>
<p>Title Three</p>
<input type="text" size="25" name="Title3" value="">
<br/>
<p>Title Four</p>
<input type="text" size="25" name="Title4" value="">
<br/>

＆＃13;

如何使用div多次包装页面上出现的多个元素？

2 个答案: