hide an element if span element contains div with a certain class

Question

I have an issue, I am trying to hide an "i" element if a "span" contains a "div" element. the "span" contains text loaded via AJAX rendered as HTML that may or may not contain the "div class=difference"

the code looks something like this:

JAVASCRIPT:

$scope.hasChild = function() {
    if ($('span.difference').has('div'))
        return true;
    else
        return false;
};

HTML:

<ul ng-repeat="instance in value">
    <li>
        <i class="fa fa-warning" style="color: #ff6a00;" ng-if="hasChild()"></i>
        <span class="difference" ng-bind-html="trustAsHtml(instance.Dati)"></span>
    </li>
</ul>

it keeps always showing the warning icon

What am I doing wrong?

These are actually two questions. 1. Wait until the included `view` is completely rendered 2. Then hide the element based on condition — Tushar, Jul 21 '15 at 09:33
Nesting `
` elements inside `` elements is asking for trouble in the first place -- inline elements cannot contain block elements. — Frédéric Hamidi, Jul 21 '15 at 09:38
the data are retrieved from a database...i think i can't give you anything more than what i've already written that would be of any help. If u have any suggestion please tell me!!! — xechelonx, Jul 21 '15 at 09:41
ok fredric...it's no problem for me changing the way data are recieved, i can easly switch to a span, so the situation will be a span inside a span — xechelonx, Jul 21 '15 at 09:42
@Alex0494 can you provide code for your ajax request and sample response? — Grundy, Jul 21 '15 at 09:48

Shomz · Answer 1 · 2015-07-21T09:51:07.623

You're using a global selector here (span.difference):

$scope.hasChild = function() {
    if ($('span.difference').has('div'))
        return true;
    else
        return false;
};

So the condition for all the element would be based on the first (or maybe last?) span element.

Anyway, you need to modify your hasChild function only for the span sibling of the current element. Something like:

if ($(this).siblings('span.difference').find('div').length > 0)

Here's a jQuery-only version, should be easy to rewrite into Angular (let me know if you need help with that):

$('i').each(function() {
  if ($(this).siblings('span.difference').find('div').length > 0)
    $(this).show();
  else
    $(this).hide();
})

i {background: #ff6a00;}
div {padding-bottom: 20px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <i class="fa fa-warning">Warning</i>
  <span class="difference">Span 1</span>
</div>
<div>
  <i class="fa fa-warning">Warning</i>
  <span class="difference">Span 2<div>with a div (not a proper structure btw)</div></span>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

Since jQuery's .has() always returns an object, even if your span is empty, the condition is always true. Try something like

$scope.hasChild = function() {
    return $('span.difference').find('div').length > 0;
};

But this will search in all spans with class difference. Try checking the instances Dati property instead.

<i class="fa fa-warning" style="color: #ff6a00;" ng-if="hasChild(instance.Dati)"></i>

$scope.hasChild = function(dati) {
    var dummy = document.createElement("div"); //create a dummy element
    dummy.innerHTML = dati;
    return $(dummy).find("> div").length > 0; //check if it has divs inside
};

BTW.: You should not put a block element inside an inline element.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 21 '15 at 09:37

Florian Gl

5,984
2
17
30

if i not mistaken - `this` in this case referse to `scope` – Grundy Jul 21 '15 at 09:46
methinks if you do `createElement` without jQuery so possibly and check div can be something like `dummy.querySelector('div') != null` – Grundy Jul 21 '15 at 10:29
yeah man it worked like charm ;) thank you it was very helpful – xechelonx Jul 22 '15 at 07:28

Vanojx1 · Answer 3 · 2015-07-21T10:22:53.713

0

something like this??

if ($('span.difference').html().match("(<div\b)(.*)(>)")!=null)
    return true;
else
    return false;

edited Jul 21 '15 at 10:22

answered Jul 21 '15 at 09:37

Vanojx1

5,574
2
23
37

That's risky - what if the span contains a word "diversity", for example? – Shomz Jul 21 '15 at 09:39
2

Haha, yeah, that's why regex is usually bad for DOM. – Shomz Jul 21 '15 at 09:52
ahaha i want a solution with regex u.u – Vanojx1 Jul 21 '15 at 09:56
1

Haha, once (and if) you manage to set all the exceptions, you'll end up with a regex the size of the rest of the code :) – Shomz Jul 21 '15 at 09:57
1

Ummm, `
`? :D – Shomz Jul 21 '15 at 10:15
not working, the condition is never verified...maybe it's because of the ajax call – xechelonx Jul 21 '15 at 10:17

Amit Chhangani · Answer 4 · 2015-07-21T10:01:27.450

0

"ng-if" accepts expressions. Please refer here: https://docs.angularjs.org/api/ng/directive/ngIf

For your case, you just need to update the function to below.

$scope.isDanger = false;
$scope.hasChild = function() {
    if ($('span.difference').has('div').find('div').length > 0)
        $scope.isDanger = true;
    else
        $scope.isDanger = false;
};

And Forgot to mention, you need to call the $scope.hasChild() function after ajax response. And replace tag with below

<i class="fa fa-warning" style="color: #ff6a00;" ng-if="isDanger"></i>

edited Jul 21 '15 at 10:01

answered Jul 21 '15 at 09:53

Amit Chhangani

28
5

what the difference with OP variant? – Grundy Jul 21 '15 at 09:53
1

And what will call the `hasChild` function for each element? How would multiple elements be handled? – Shomz Jul 21 '15 at 09:54
1

@Grundy, the difference is that this won't work **at all** :D – Shomz Jul 21 '15 at 09:54
Please view the above reply now, Corrected And Edited. Sorry for the inconvenience caused. ;) – Amit Chhangani Jul 21 '15 at 10:00
It still needs to work for multiple elements individually. This will use a single value for all of them. – Shomz Jul 21 '15 at 10:13

hide an element if span element contains div with a certain class

4 Answers4