檢查屬性和值是否存在于div中

我有一個有多個孩子的div。

<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

我想檢查，在我的主 div (data-level="1") 中是否存在屬性data-level值為3的子級。

uj5u.com熱心網友回復：

我希望這個答案對你有幫助

從以下代碼片段中，您可以從主 div[data-level="1"] 訪問每個嵌套的子 div

此代碼將檢查每個子 div 并在警報彈出視窗中進行確認（如果 div 具有資料級屬性和值3）

var mainDiv = $('div[data-level="1"]'); // get parent div
var getChildDiv = mainDiv.find('div'); // get all child divs

// check each child div one by one 
// i indicate the child div position in order, it's starting from 0
getChildDiv.each(function(i) {
    if ($(this).attr('data-level')=="3") {
        // give confirmation message if relavant child div ha data-level attribute , and it's value 3
        alert("Child div "   i  " has data-level attribute and it's value is 3");
    } else {
        // give message if div doesn not contain data-level attribute with value 3
        alert("Child div "   i  " is not matching div");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

從以下代碼片段中，您可以檢查主 div[data-level="1"] 中所有嵌套的子 div

此代碼將檢查總體子 div 計數并在警報彈出視窗中進行確認（子 div 的總數具有資料級屬性，其值為3）

var mainDiv = $('div[data-level="1"]'); // get parent element
var getChildDiv = mainDiv.find('div[data-level="3"]'); // get child div with data-level attribute and it's value 3
var numberOfChildDiv = getChildDiv.length; // get the total number of child elements div[data-level="3"]

if (numberOfChildDiv === 1) {
    // if only one matching child div display following message
    alert('Parent div has 1 child div with data-level attribute and it\'s attribute value is 3');
} else if(numberOfChildDiv > 1) {
    // if more thanone matching child divs display following message
    alert('Parent div has ' numberOfChildDiv ' child divs with data-level attribute and it\'s attribute value is 3');
} else {
   // no matching child divs display following message
   alert('No matching selection');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

uj5u.com熱心網友回復：

您可以根據您的查詢建立一個條件......像這樣的事情？

片段：

if (document.querySelectorAll('.SimpleList [data-level="3"]')[0]) {
  console.log('div data-level="3" exist');
}
else { 
  console.log('div data-level="3" NOT exist');
}

<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

標籤：javascript 查询

上一篇：當從Laravel控制器呼叫html時，owlcarousal被破壞

下一篇：關于jquery點擊添加CSS等元素洗掉CSS。怎么做？