كيف يمكنني استخدام مسج لإدراج <DIV> ملفوفة حول عدد متغير من الطفل العناصر ؟

Question

لدي ASP.Net التعليمات البرمجية مشابهة لما يلي (هذا هو داخل حقول):

<ol>
    <li>
        <label>Some label</label>
        <one or more form controls, ASP.Net controls, labels, etc.>
    </li>
    <li>
        <label>Another label</label>
        <... more of the same...>
    </li>
    ...
</ol>

أنا أحاول أن أبقى على الترميز نظيفة قدر ما أستطيع ، ولكن لقد قررت أن لأسباب مختلفة ، أنا بحاجة إلى التفاف DIV حول كل شيء في القائمة البند بعد التسمية الأولى, مثل هذا:

<ol>
    <li>
        <label>Some label</label>
        <div class="GroupThese">
           <one or more form controls, ASP.Net controls, labels, etc.>
        </div>
    </li>
    <li>
        <label>Another label</label>
        <div class="GroupThese">
            <... more of the same...>
        </div>
    </li>
    ...
</ol>

وأود أن بدلا من أن تفعل هذا مع "جافا سكريبت غير مزعجة" عن طريق مسج بدلا من رمي النفايات صفحتي اضافية مع العلامات حتى أتمكن من الحفاظ على شكل لغويا "نظيفة".

أنا أعرف كيفية كتابة مسج محدد للوصول إلى التسمية الأولى في كل عنصر من عناصر القائمة $("لي+تسمية") أو استخدام :الطفل الأول.أنا أيضا أعرف كيفية إدراج الأشياء بعد التحديد.

ما لا أستطيع معرفة (على الأقل في هذا الوقت المتأخر من الليل) هو كيفية العثور على كل شيء بعد التسمية الأولى في قائمة البند (أو تقريبا كل شيء في القائمة ما عدا التسمية الأولى ستكون طريقة أخرى لوضعها) والتفاف DIV حول ذلك في وثيقة دالة جاهزة.

تحديث:

أوين رمز عملت بمجرد إزالة علامات الاقتباس المفردة حول:

$('this')

وتعيين السليم decendent محدد:

$("li label:first-child")

من أجل فقط حدد التسمية الأولى التي يحدث بعد عنصر قائمة.

هنا هو ما فعلته:

$(document).ready(function() {

    $('li label:first-child').each(function() {
        $(this).siblings().wrapAll('<div class="GroupThese"></div>');
    });
});

Answer 1

تحرير:تصحيح التعليمات البرمجية (انظر القانون القديم في مراجعة التاريخ و تعليقات لمزيد من المعلومات)

طيب هذا يجب أن تعمل:

$('li label:first-child').each(function() {
    $(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});

من:

<li>
    <label>Some label</label>
    <div>stuff</div>
    <div>other stuff</div>
</li>
<li>
    <label>Another label</label>
    <div>stuff3</div>
</li>

ينتج:

<li>
    <label>Some label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff</div>
      <div>other stuff</div>
    </div>
</li>
<li>
    <label>Another label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff3</div>
    </div>
</li>

Answer 2

نهج واحد يكون مجرد التفاف كل شيء داخل <li> ثم نقل التسمية بها ، على سبيل المثال

var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());