Question

我有一个问题，我想隐藏一个＆＃34;我＆＃34;元素如果＆＃34; span＆＃34;包含一个＆＃34; div＆＃34;元件。＆＃34; span＆＃34;包含通过呈现为HTML的AJAX加载的文本可能包含也可能不包含＆＃34; div class = difference＆＃34;

代码看起来像这样：

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>

始终显示警告图标

我做错了什么？

Answer 1

您在这里使用全局选择器（span.difference）：

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

因此所有元素的条件将基于第一个（或可能是最后一个？）span元素。

无论如何，您只需要修改当前元素的跨度兄弟hasChild函数。类似的东西：

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

这是一个仅限jQuery的版本，应该很容易重写为Angular（如果你需要帮助，请告诉我）：

$('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>

Answer 2

由于jQuery的.attendance-sheet .data .names > div始终返回一个对象，即使您的span为空，条件也始终为true。尝试像

这样的东西

.has()

但是这会在所有$scope.hasChild = function() { return $('span.difference').find('div').length > 0; };中搜索类span。请尝试检查实例difference属性。

Dati

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

Answer 3

这样的事情？

*.zip

Answer 4

＆＃34; NG-如果＆＃34;接受表达。请参阅此处：https://docs.angularjs.org/api/ng/directive/ngIf

对于您的情况，您只需要将功能更新到下面。

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

并且忘了提一下，你需要在ajax响应之后调用$ scope.hasChild（）函数。并用下面的

替换标签

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

如果span元素包含具有某个类的div，则隐藏元素

4 个答案: