在一些元素之前和之后插入div和li

时间:2014-06-26 12:07:37

标签: jquery html css

$('.createcasedata').html(getHtml(data));
$( 'label' ).before( "<li class='ui-field-contain ui-li-static ui-body-inherit'>" );
$( 'input' ).before( "<div class='ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear'>" );
$( 'input' ).after('</div>');
$( 'input' ).after('</li>');
$('textarea').attr('class','ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow');

想要实现这样的目标:

<li data-role="fieldcontain" class="ui-field-contain ui-li-static ui-body-inherit">
    <label for="Test" mobile="" name="">Test Mobile Name</label>
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
        <input name="name" type="name" required="" calculated="false" len="150">
    </div>
</li>

我现在得到的是什么:

    <li class="ui-field-contain ui-li-static ui-body-inherit"></li>
<label for="Test" mobile="" name="">Test Mobile Name</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"></div>
<input name="name" type="name" required="" calculated="false" len="150">

请帮忙

我的数据是:

<form id="caseform" action="url">
    <label for=Test Mobile Name>Test Mobile Name</label>
    <input name="name" type="name" required calculated="false" len="150" />
    <label for=Office Phone:>Office Phone:</label>
    <input name="phone_office" type="tel" len="100" />
    <label for=Website:>Website:</label>
    <input name="website" type="url" len="255" />
    <label for=Fax:>Fax:</label>
    <input name="phone_fax" type="tel" len="100" />
    <label for=Billing Street:>Billing Street:</label>
    <input name="billing_address_street" type="varchar" group="billing_address" calculated="false" len="150" />
    <label for=Shipping Street:>Shipping Street:</label>
    <input name="shipping_address_street" type="varchar" group="shipping_address" calculated="false" len="150" />
    <label for=Email Address:>Email Address:</label>
    <input name="email1" type="varchar" group="email1" calculated="false" len="" />Description:
    <textarea name="description" type="text" group="" id_name="" required related_module="" calculated="false" len="">Description:</textarea>
    <label class="select">Type:</label>
    <select name="account_type" type="enum" group="" id_name="" required related_module="" calculated="false" len="50">
        <option value=""></option>
        <option value="Analyst">Analyst</option>
        <option value="Competitor">Competitor</option>
        <option value="Customer">Customer</option>
        <option value="Integrator">Integrator</option>
        <option value="Investor">Investor</option>
        <option value="Partner">Partner</option>
        <option value="Press">Press</option>
        <option value="Prospect">Prospect</option>
        <option value="Reseller">Reseller</option>
        <option value="Other">Other</option>
    </select>
    <label class="select">Industry:</label>
    <select name="industry" type="enum" group="" id_name="" required related_module="" calculated="false" len="50">
        <option value=""></option>
        <option value="Apparel">Apparel</option>
        <option value="Banking">Banking</option>
        <option value="Biotechnology">Biotechnology</option>
        <option value="Chemicals">Chemicals</option>
        <option value="Communications">Communications</option>
        <option value="Construction">Construction</option>
        <option value="Consulting">Consulting</option>
        <option value="Education">Education</option>
        <option value="Electronics">Electronics</option>
        <option value="Energy">Energy</option>
        <option value="Engineering">Engineering</option>
        <option value="Entertainment">Entertainment</option>
        <option value="Environmental">Environmental</option>
        <option value="Finance">Finance</option>
        <option value="Government">Government</option>
        <option value="Healthcare">Healthcare</option>
        <option value="Hospitality">Hospitality</option>
        <option value="Insurance">Insurance</option>
        <option value="Machinery">Machinery</option>
        <option value="Manufacturing">Manufacturing</option>
        <option value="Media">Media</option>
        <option value="Not For Profit">Not For Profit</option>
        <option value="Recreation">Recreation</option>
        <option value="Retail">Retail</option>
        <option value="Shipping">Shipping</option>
        <option value="Technology">Technology</option>
        <option value="Telecommunications">Telecommunications</option>
        <option value="Transportation">Transportation</option>
        <option value="Utilities">Utilities</option>
        <option value="Other">Other</option>
    </select>
    <label for=Annual Revenue:>Annual Revenue:</label>
    <input name="annual_revenue" type="varchar" group="" calculated="false" len="100" />
    <label for=Employees:>Employees:</label>
    <input name="employees" type="varchar" group="" calculated="false" len="10" />
    <label for=SIC Code:>SIC Code:</label>
    <input name="sic_code" type="varchar" group="" calculated="false" len="10" />
    <label for=Ticker Symbol:>Ticker Symbol:</label>
    <input name="ticker_symbol" type="varchar" group="" calculated="false" len="10" />
    <label for=Ownership:>Ownership:</label>
    <input name="ownership" type="varchar" group="" calculated="false" len="100" />
    <label for=Rating:>Rating:</label>
    <input name="rating" type="varchar" group="" calculated="false" len="100" />
    <input id="mybutton" type="submit" title="Submit" value="Submit" />
</form>

1 个答案:

答案 0 :(得分:0)

试试这个http://jsfiddle.net/9LNPb/1/

      $( 'input' ).wrap( "<div class='ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear'></div>" );
var divs = $("label , .ui-input-text");
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<li class='ui-field-contain ui-li-static ui-body-inherit'>");
}

输入

<label>Hi</label>
<input type="text">

输出

   <li class="ui-field-contain ui-li-static ui-body-inherit">
       <label>Hi</label>
       <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
         <input type="text">
       </div>
   </li>