私のjQueryマップスニペットは3.0では失敗しますが、2.0では動作しますか？

Question

私はjQueryマップスニペットでエラーが発生している最中にいます。これはjQuery 2で動作しますが、3にアップグレードすると壊れてしまいます。理由はわかりません。スタック：/

var menuItems = $("#topNav a"); 
 

 
var scrollItems = menuItems.map(function() { 
 
    var item = $($(this).attr("href")); // <= this is the culprit ?? 
 
    if (item.length) { 
 
    return item; 
 
    } 
 
}); 
 

 
// Expecting an object containing the page sections 
 
console.log(scrollItems);

<!-- THIS FAILS (jQuery 3) --> 
 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 

 
<!-- THIS WORKS HOWEVER (JQuery 2) --> 
 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> 
 

 
<!-- My navigation --> 
 
<nav id="topNav"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#services">Services</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</nav> 
 

 
<-- My Page sections --> 
 
<div id="page"> 
 
    <div id="about"> 
 
    <h2>About Us</h2> 
 
    </div> 
 
    <div id="services"> 
 
    <h2>Services</h2> 
 
    </div> 
 
    <div id="contact"> 
 
    <h2>Contact Us</h2> 
 
    </div> 
 
</div>

Answer 1

問題は、あなたの最初の<a>要素です。これはhrefが#であり、$('#')という結果になりました。シズルセレクタエンジンはエラーをスローします。 jQuery 2.xが例外をスローしていない理由は、おそらくそうであるはずの謎です。

あなたはmap()からその値を除外することができ当面の問題解決するには：なぜあなたは `$（$（この）.ATTR（ "HREF"）を）やっている

var menuItems = $("#topNav a"); 
 

 
var scrollItems = menuItems.map(function() { 
 
    if ($(this).attr('href') == '#') 
 
    return null; 
 

 
    var item = $($(this).attr('href')); 
 
    if (item.length) { 
 
    return item; 
 
    } 
 
}).get(); 
 

 
// Expecting an object containing the page sections 
 
console.log(scrollItems);

<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 

 
<nav id="topNav"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#services">Services</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div id="page"> 
 
    <div id="about"> 
 
    <h2>About Us</h2> 
 
    </div> 
 
    <div id="services"> 
 
    <h2>Services</h2> 
 
    </div> 
 
    <div id="contact"> 
 
    <h2>Contact Us</h2> 
 
    </div> 
 
</div>