如果span元素包含具有特定類的div，則隱藏一個元素

Question

我有一個問題，如果“ span”包含“ div”元素，我想隱藏“ i”元素。 “ span”包含通過AJAX加載為HTML呈現的文本，該文本可能包含也可能不包含“ div class = difference”

代碼看起來像這樣：

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元素。

無論如何，您只需要為當前元素的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的.has()始終返回一個對象，即使您的跨度為空，條件也始終為true。 嘗試類似

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

但這會搜索所有具有類difference span 。 嘗試改為檢查實例的Dati屬性。

<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
};

順便說一句： 您不應該將塊元素放在內聯元素中。

Answer 3

像這樣的東西？

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

Answer 4

“ ng-if”接受表達式。 請參閱此處： 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>