How to detect if an element is accompanied by text with jQuery?

Question

I have a certain div.box that will be repeated several times, and some of them have a link (a.link) with a specific class.

Example:

<div class="box" data-id="1">
Primeiro texto
</div>

<div class="box" data-id="2">
Segundo texto <a class="link">Clique aqui</a>
</div>

<div class="box" data-id="3">
<a class="link">Clique aqui</a>
</div>

<div class="box" data-id="4">
Testando
</div>

Das divs above, I need to detect that, around the a.link, no text exists. That is, from the above example could return only to div.box whose the data-id is equal to 3.

How can I detect it through jQuery?

I mean, I have to make sure that the div.box contains only that element within it a.link (and nothing more).

Answer 1

There are several conditions that need to be checked. The way I think is most right is to go through all the childNodes and check how many there are that are not empty. At the same time check if at least one of them has the desired element/class:

function temSoClasse(elInicial, seletor) {
    return = $(elInicial).filter(function () {
        var hasLink = false;
        var nodes = $(this.childNodes).filter(function (i, el) {
            if (el.nodeType == 1) {
                if ($(el).parent().find(seletor).length) hasLink = true;
                return true;
            }
            return el.textContent.trim().length;
        });
        return nodes.length == 1 && hasLink;
    });
}

And then you can use it like this:

var els = temSoClasse('.box', 'a.link');
els.css('color', 'blue'); // vai mudar a côr do elemento que se procura

jsFiddle: http://jsfiddle.net/kps5xbec/

---

A more compressed version could be like this:

function temSoClasse(elInicial, seletor) {
    return $(elInicial).filter(function () {
        return this.querySelector(seletor) && $(this.childNodes).filter(function (i, el) {
            return el.textContent.trim().length;
        }).length == 1;
    });
}

jsFiddle: http://jsfiddle.net/kps5xbec/8/

Answer 2

I think I found a way:

var list = $(".box").filter(function(i, el) 
{
    return Array.from(el.childNodes).filter(function(cn) 
    {
        return  cn.textContent.trim() != "" && 
                cn.nodeType == 3;
    }).length == 0;
});

Fiddle

Explanation:

1. On top of the dial $(".box") we rotate a filter(), since the intention is to filter the elements that do not have text between the element a;
2. For each element, we take the collection childNodes which contains the text elements that we will verify;
3. To nodeList not quite an array, so to be able to run one more filter() create an array with Array.from(), and then we rotate the filter();
4. The condition of the latter filter() is he to be of the text type(nodeType == 3) and not be empty(textContent.trim() != ""), because there is textNodes only with line break;
5. The latter filter() being empty(.length == 0), we are sure - so I hope haha - of him not having textNodes immadiately below it.

UPDATE

Well, if you want to make the function reusable, you can create a method in jQuery, I think it is more correct and within the standard:

$.fn.checarElemento = function(checarFilhos)
{
    return $(this).filter(function(i, el) 
    {
        return $(el).find(checarFilhos).length > 0 && Array.from(el.childNodes).filter(function(cn) 
        {
            return  cn.textContent.trim() != "" && 
                    cn.nodeType == 3;
        }).length == 0;
    });
};

And to ensure there is the desired selector within the element in question, I added the simple condition $(el).find(checarFilhos).length > 0, which, if not satisfied, does not rotate the filter() about the childNodes. Micro optimization, perhaps? Usage:

$(".box").checarElemento("a.link");

Fiddle

Answer 3

As @Dontvotemedown said, "... this is a good exercise".

$(".box").filter(function(i) 
{
    var $that =  $(this);

    var node = $that.contents().get(0);

     if ($that.contents().length == 1 && $(node).is('a')) {
        return true;
     }

     return false;

});

When we use the function $.contents, jQuery returns the nodes present within that element.

So I check if there’s only one knot with $(this).contents().length == 1.

Then check if the node is element whose tag is a, through the $(node).is('a').

Through function $.is is that we check if the element is a link. How node is not a jQuery selector, it is necessary to use it with jQuery through the $(...).

The $(this).contents().get(0) is in charge of taking the first element.

So we have the verification that the div.box has a node, and if that node is a link.

Updating: Following the example of @Dontvotemedown’s reply, we could also, rather than use $(node).is('a'), do as follows:

 if ($that.contents().length == 1 && node.nodeType == 3) {
     return true;
 }