Найти элементы DOM, содержащие текст и другие элементы DOM внутри - PullRequest
Новая
       1

Найти элементы DOM, содержащие текст и другие элементы DOM внутри

2 голосов
/ 22 сентября 2011

Я пытаюсь применить класс ко всем элементам, которые содержат текст или которые содержат текст и другие элементы dom внутри.По крайней мере, внутри элемента должен быть какой-то текст.

Этот div должен получить класс: 

<div class="theClass">Some text</div>

Этот div также должен получить класс: 

<div class="theClass">Some text<div class="theClass more">More text</div></div>

Но этот должен только дать дочернему элементу div класс: 

<div class=""><div class="theClass more">More text</div></div>

В данный момент я использую селектор: hasText, который я нашел здесь поиск элементов с текстом, используя jQuery . 

jQuery.expr[':'].hasText = function(element, index) {
// if there is only one child, and it is a text node
if (element.childNodes.length == 1 && element.firstChild.nodeType == 3) {
   return jQuery.trim(element.innerHTML).length > 0;
}
   return false;
};

Но он возвращает только те элементы, которые содержат текст.Мне нравится иметь элементы, которые содержат текст и другие элементы (если они есть).

Спасибо!

Ответы [ 3 ]

0 голосов
/ 22 сентября 2011

Я пытался вот так. 

 // content - children == no.of. text nodes.
    $.fn.islooseTextInside = function(c){
        jq = this;
        jq.each(function(){
            var $th = $(this);
            //no text nodes
            if(($th.contents().length - $th.children().length)  == 0){
                $th.children().islooseTextInside();
            }
            //only text nodes
            if($th.contents().length &&  $th.children().length == 0){
                applyClass($th)
            }
            //both are present
            if(( $th.contents().length - $th.children().length  ) > 0 ){    
                applyClass($th)
                $th.children().islooseTextInside();
            }
        })

        function applyClass(o){
            o.addClass('theClass')
        }
    }
    $("body div").islooseTextInside();

Пример HTML: 

<body>
    <div>Some text</div>
    <div>Some text<div>Some text</div></div>
    <div><div>Some text</div></div>
</body>
0 голосов
/ 23 сентября 2011

С помощью Николая Пелучетти мне удалось исправить это с помощью следующих функций, но это все еще не самое лучшее! 

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
    function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
    .remove();
    return this;
}

jQuery.expr[':'].hasText = function(element, index) {
// if there is only one child, and it is a text node
   $(element).cleanWhitespace();
   if (element.firstChild != null) {
        if (element.firstChild.nodeType == 3) {
            return jQuery.trim(element.innerHTML).length > 0;
        }
   }
   return false;
};

Поэтому сначала очистите все пробелы, потому что <div> <img src="noimage"></div> будет текстовым элементом, если вы его не очистите (из-за пробела).

Вы должны снова вызвать сам вызов функции, когда firstChild не является nodeType 3 ... но я работаю над этим. Опубликуем решение здесь!

0 голосов
/ 22 сентября 2011

Я не понимаю полностью, но может ли это быть так: 

<div ><div class="more">More text</div></div>

<div >Some text<div class="more">More text</div></div>

jQuery.expr[':'].hasText = function(element, index) {
    // if there is only one child, and it is a text node
    if (element.firstChild != null) {
        if (element.firstChild.nodeType == 3) {
            return jQuery.trim(element.innerHTML).length > 0;
        }
    }
    return false;
};

$('div:hasText').addClass('theClass')

Вы получаете: 

  <div><div class="more theClass">More text</div></div>

<div class="theClass">Some text<div class="more theClass">More text</div></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...