特定の選択の子ではない要素を選択

Question

"test"クラスのdivの子ではないdiv内のすべてのハイパーリンクを選択する必要があります。私は$("a", $("div").not(".test"))が動作すると思っていましたが、別のdivをクラス "test"のdivに入れた場合、私の選択は機能しません。 次の例では、このタスクを達成するために必要なリンク4,5,6のみを選択する必要があります。あなたが親testクラスとdivとして持っていない要素を見つけるためにnotメソッドを使用する必要が

var links = document.getElementsByTagName("a"); 
 
var notAds = $("a", $("div").not(".test")); 
 
console.log(links.length); 
 
console.log(notAds.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <div> 
 
    <div> 
 
     <a href="test1.html">test 1 link</a> 
 
     <a href="test2.html">test 2 link</a> 
 
     <a href="test3.html">test 3 link</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div> 
 
    <a href="test4.html">test 4 link</a> 
 
    <a href="test5.html">test 5 link</a> 
 
    <a href="test6.html">test 6 link</a> 
 
</div>

Answer 1

。

var notAds = $("a").not($('.test').find('a')); 

not方法マッチした要素のセットから要素を削除します。

var links = document.getElementsByTagName("a"); 
 
var notAds = $("a").not($('.test').find('a')); 
 
console.log("Length: " + notAds.length); 
 
$(notAds).map(function(){ 
 
    console.log($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <div> 
 
    <div> 
 
     <a href="test1.html">test 1 link</a> 
 
     <a href="test2.html">test 2 link</a> 
 
     <a href="test3.html">test 3 link</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div> 
 
    <a href="test4.html">test 4 link</a> 
 
    <a href="test5.html">test 5 link</a> 
 
    <a href="test6.html">test 6 link</a> 
 
</div>