jQuery: как можно выбрать тексты, не окруженные тегами HTML?

Если у вас возникла проблема с тупиком, проверьте http://www.codeproject.com/KB/dotnet/Deadlock_Detection.aspx

5
задан g2g23g 17 October 2009 в 23:17
поделиться

7 ответов

Если вы имеете в виду, что хотите выбрать текстовый узел напрямую, не рекомендуется использовать jQuery. Чтобы уточнить, получение обернутого набора текстовых узлов не является проблемой, но объединение команд в обернутый набор текстовых узлов дает непредсказуемые результаты или не работает со многими командами, поскольку они ожидают, что обернутый набор будет содержать узлы элементов.

Вы можете сделать это, отфильтровав дочерние элементы родительского элемента, чтобы они возвращали только текстовые узлы, т.е. nodeType === 3 , но если ваш вопрос касается выполнения некоторых манипуляций с текстом, тогда получите родительский элемент и текстовое содержимое. Например,

$('#parentElement').html(); // html of parent element

$('#parentElement').text(); // text content of parent element and any descendents

$('#parentElement').contents(); // get all child nodes of parent element

Если вы хотите получить текстовые узлы, выполните следующие действия:

$('#parentElement').contents().filter(function() { return this.nodeType === 3 });

Или вы можете посмотреть Плагин Text Children Карла Сведберга , который также предоставляет различные варианты.

РЕДАКТИРОВАТЬ:

В ответ на ваш комментарий, один из способов работы с текстовыми узлами в обернутом наборе - это преобразовать объект jQuery в массив, а затем работать с массивом. Например,

// get an array of the immediate childe text nodes
var textArray = $('#parentElement')
                    .contents()
                    .filter(function() { return this.nodeType === 3 })
                    .get();

// alerts the text content of each text node
$.each(textArray, function() {
    alert(this.textContent);
});

// returns an array of the text content of the text nodes
// N.B. Remember the differences in how  different 
// browsers treat whitespace in the DOM
textArray = $.map(textArray, function(e) {
    var text = $.trim(e.textContent.replace(/\n/g, ""));
    return (text)? text : null;
});
7
ответ дан 14 December 2019 в 08:55
поделиться

Лично я бы заключил их в , тогда вам будет проще ссылаться на них. Я использую фильтр Расса Кэма, так что подпишитесь (и +1) ему

$(document).ready(function(){
 $('body').contents().filter(function(){ return this.nodeType === 3 }).each(function(){
  $(this).wrap('<span class="text"></span>');
 })
})

Тогда вы можете просто использовать $ ('. Text') и селекторы для более легкого доступа к ним.

1
ответ дан 14 December 2019 в 08:55
поделиться

Используйте метод .contains . См. Найти текстовую строку с помощью jQuery?

0
ответ дан 14 December 2019 в 08:55
поделиться

Ну, он должен быть окружен чем-то , даже если это просто тег . Если бы у вас был HTML-документ, в котором написано только это, я бы подумал, что браузер неявно поместил бы за вас в DOM.

При этом взгляните на это:

Как выбрать текстовые узлы с помощью jQuery?

0
ответ дан 14 December 2019 в 08:55
поделиться

Мне кажется, что ваш текст должен быть списком (ol / ul). Это даст вам несколько семантических ловушек для jQuery и значительно упростит задачу.

0
ответ дан 14 December 2019 в 08:55
поделиться

А как насчет небольшого изменения DOM? Сначала выберите узлы, которые содержат желаемую строку, а затем запустите функцию, которая заменяет каждое вхождение «строка» на «строку»

Нам не нужны внешние плагины для этого

<div>
    Vodka <br />
    Rum <br />
    Whiskey<br />
</div>

<script type="text/javascript">
$(function(){
    $.fn.replaceText = function(txt){
        var reg = new RegExp(txt, 'g');
        var strWith = '<span class="selected">' + txt + '</span>';
        var rep = this.html().replace(reg, strWith);
        this.html(rep);
        return $("span", this);
    };
    $("div:contains('Vodka')").replaceText('Vodka').css('textDecoration', 'underline');
});
</script>

Я создал этот сценарий очень быстро, поэтому не надо Не судите строго :) (а сейчас 2:28 AM :-D)

0
ответ дан 14 December 2019 в 08:55
поделиться

Попробуйте это

$("div:contains('Beer')").css("text-decoration", "underline");
-1
ответ дан 14 December 2019 в 08:55
поделиться
Другие вопросы по тегам:

Похожие вопросы: