JQuery: запустить метод для определенных элементов, но не для других.

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> 

Я не знаю ни одного способа, чтобы выбрать один из родителей не работает также метод на своем ребенке. Любая помощь будет оценена по достоинству. Благодаря!

Edit: Здесь используется код Пауло и не работает: http://jsbin.com/usaxa

Edit @ Джефф фрикадельки Ян: Привет, с помощью INPLACE замены он выводит в виде текста, а не HTML: 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. Таким образом, вы сможете подключить другие функции jQuery после вызова плагина. См. Мое редактирование.

---

вместо установки значения текста узла (узлов [I] .nodeValue), его можно удалить, и добавить DIV после него. Вместо того чтобы использовать для цикла и замены текста, вы можете удалить цикл и использовать встроенные функции JQuery в:

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(); 
    }); 
}; 

Это отражено в Jquery Docs (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!'); 

jQuery очень хорошо работает над множеством элементов, вам не нужно их переплетать.

EDIT:

Это должно работать, чтобы принять хорошее наблюдение учетной CMS в:

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