Jquery заменяет точки пробелами внутри всех DIV одним классом

Question

Я использую последнюю версию Jquery и следующий скрипт:

<script type="text/javascript">
$(document).ready(function(){
var el = $('.title');
el.html(el.html().replace(/\./gi, " "));
});
</script>

Это div:

<div class="title">The.quick.brown.fox</div>

То, что он делает, заменяет все точки пробелами в DIV с классом "title", и на самом деле он отлично работает для этой работы.

Но у меня есть много DIV с одним и тем же классом "title" с разными строками, и мне нужно, чтобы все они заменяли точки пробелами. Но здесь возникает проблема, так как все, что я получаю, это одна и та же строка результата на всех этих DIV "Быстрый коричневый лис", в то время как все строки результата должны отличаться, поскольку все исходные строки различны ...

Что я должен сделать, чтобы заменить точки во всех DIV с классом "title" и различными строками в каждом DIV?

Спасибо

Answer 1

Вы можете использовать each () для итерации по соответствующим элементам или передать функцию в html () и вычислить там новый текст:

$(document).ready(function() {
    $(".title").html(function(index, currentHtml) {
        return currentHtml.replace(/\./gi, " ");
    });
});

Answer 2

Просто используйте метод jQuery each, чтобы перебрать все элементы класса .title:

$(document).ready(function(){
  $('.title').each(function(){
    $(this).html($(this).html().replace(/\./gi, " "));
  });
});

Answer 3

Пока у вас есть только текст внутри ваших div, предложенные функции будут работать очень хорошо. Однако, чтобы разрешить произвольный HTML (например, The.quick.brown <img src='fox.jpg'>), код должен быть более точным.

$('.title').each(function() {
    if (this.nodeType == 3)
        this.nodeValue = this.nodeValue.replace(/\./g, " ");
    else
        $(this).contents().each(arguments.callee);
});

По сути, вы рекурсивно перебираете все потомки узла и заменяете только узлы типа 3 (= текст).

Скрипка: http://jsfiddle.net/jZgUY/