مسج: تشغيل أسلوب على عناصر معينة دون غيرها

Question

وأواجه صعوبة في معرفة كيفية تشغيل أسلوب على بعض العناصر / nodetypes ولكن البعض الآخر لا.

وعلى سبيل المثال وهنا بعض HTML:

<div id="parent">
    <div class="subparent">Changing Text
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Changing Text</div>
        <div class="child">Changing Text
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Changing Text</div>
</div>

وطريقة بلادي شيء من هذا القبيل:

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
        this.innerHTML = this.innerHTML
        .replace(/Changing Text/ig, "Edited!")
    });
};

والآن أريد تغيير النص من كل شيء ما عدا ما هو في div.no التغيير. وينبغي أن تكون النتيجة النهائية شيئا من هذا القبيل:

<div id="parent">
    <div class="subparent">Edited!
        <div class="no-change">Changing Text</div>
    </div>
    <div class="subparent">Edited!</div>
        <div class="child">Edited!
            <div class="no-change">Changing Text</div>
        </div>
    <div class="subparent">Edited!</div>
</div>

وأنا لا أعرف من أي وسيلة لتحديد أحد الوالدين دون أيضا تشغيل الطريقة على طفل لها. سيكون موضع تقدير أي مساعدة. شكرا!

وتحرير: وهنا باستخدام رمز باولو، وليس العمل: http://jsbin.com/usaxa

وتحرير @ جيف اللحم المفروم يانغ: مرحبا، وذلك باستخدام استبدال inplace الخاص بك فإنه النواتج كنص بدلا من أتش تي أم أل: http://jsbin.com/idina

وأنا أيضا لم يكن قادرا على الحصول على وسائل أخرى تعمل: http://jsbin.com/aguca

هل يمكن أن تقدم مثالا من فضلك؟

وشكرا!

Answer 1

وجرب هذا:

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // or do in-place editing
      for(var i = 0, len = nodes.length; i < len; i++) {
        nodes[i].nodeValue = nodes[i].nodeValue.replace(/Changing Text/ig, "Edited!");
      }
    });
};

// prove that no change is still white
$("#parent div.no-change").css("color", "white");

// change text, then make it red using jQuery
$("#parent div:not(.no-change)").changingtext().css("color", "red");

والنتيجة النهائية هي بالفعل HTML. لذلك، سوف تكون قادرة على سلسلة ظائف مسج أخرى بعد المكالمة المساعد. أرى التحرير.

---

وبدلا من تعيين قيمة عقدة النص (العقد [أنا] .nodeValue)، يمكنك إزالته وإلحاق DIV بعد ذلك. بدلا من استخدام لحلقة واستبدال النص، يمكنك إزالة لحلقة واستخدام وظائف مسج الذي بني في:

jQuery.fn.changingtext = function(expr) {
    return this.each(function() {
      // filter for text node
      var nodes = $(this).contents().filter(function() { return this.nodeType == 3); });

      // you can replace the text nodes:
      // insert a DIV after each one, 
      // then remove it from the DOM
      nodes.after("<div>Edited!</div>").remove();
    });
};

وهذا هو موثقة في مستندات مسج ( http://docs.jquery.com ) على التلاعب و العبور.

Answer 2

ولست متأكدا حقا لماذا كنت تكتب البرنامج المساعد للقيام بذلك. وهذا من شأنه إيجاد جميع عناصر <div> داخل #parent، تصفية تلك التي ليس لديها فئة من .no-change، وتعديل محتويات النص منهم:

$('#parent').find('div').not('.no-change').text('Edited!');

والتي يمكن أيضا أن تكون مكتوبة على النحو التالي:

$('#parent div:not(.no-change)').text('Edited!');

ومسج جيدة جدا في العمل على مجموعة من العناصر، لم يكن لديك لحلقة من خلالهم وكذا.

تعديل : ل

وهذا يجب العمل على اتخاذ الملاحظة حساب CMS الطيبة:

$('#parent').find('div').not('.no-change').each(function() {
    $(this).contents().not('*').eq(0).replaceWith('Whatever');    
});