JavaScript event.target with Ifステートメント

Question

なぜelse {}の部分が機能しないのですか？そして解決策は何ですか？console.logの '...'内の.........が表示されていますが、 'out'は表示されません。ありがとう。ここで

var header = $('header'); 
 
header.mouseover(function(event) { 
 
    if ($(event.target).parents('li').attr('rel').length > 0) { 
 
    console.log('in') 
 
    } else { 
 
    console.log('out') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
    <li rel="one"> One Element</li> 
 
    <li rel="two"> One Element</li> 
 
    <li> Other Element</li> 
 
    <li> Other Element</li> 
 
    <li> Other Element</li> 
 
    <li> Other Element</li> 
 
    </ul> 
 
</header>

Answer 1

元のコードを、それを行うための一つの方法です。

$(event.target).parents('li').attr('rel').length 

.parent('li')我々はli要素でいますので、無用です。

正しいラインは、したがって、我々はこのかどうかを確認するには、以下のternary if条件を使用することができ、我々はlength性質を持っていないいくつかのli要素のためのundefinedとundefinedを取得します。この行件まで第二

$(event.target).attr('rel').length 

$(event.target).parents('li').attr('rel')になります要素が実際に存在し、我々は他のlengthプロパティを返すことができるだけで0

var header = $('header'); 
 
header.mouseover(function (event) { 
 
    var elem = $(event.target).attr('rel') ? $(event.target).attr('rel').length : 0; 
 
    if (elem > 0) { 
 
     console.log('in') 
 
    } 
 
    else { 
 
     console.log('out') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
     <li rel="one"> One Element</li> 
 
     <li rel="two"> One Element</li> 
 
     <li> Other Element</li> 
 
     <li> Other Element</li> 
 
     <li> Other Element</li> 
 
     <li> Other Element</li> 
 
    </ul> 
 
</header>