hrefが空白の場合はリンクを非表示にし、別のボタンを表示しますか？

Question

私はそれぞれのリスト項目内にリンクとdivを持っています。リンクにhrefがある場合、divがそのリスト項目内に隠されており、リンクが正常に表示されていることを確認したいと思います。

リンクにhref（例：href = ""）がない場合、私はそれを表示できるようにdiv .showクラスを追加します。私はまた同時にリンクを隠したいと思う。

これを行うには良い方法がありますか？おかげ

<style> 
    .nolinkdiv { display:none; } 
    .show { display:block!important; } 
</style> 

<ul> 
    <li> 
    <a href="/register.html">Register</a> 
    <div class="nolinkdiv">Register Coming Soon</div> 
    </li> 
    <li> 
    <a href="">Register</a> 
    <div class="nolinkdiv">Register Coming Soon</div> 
    </li> 
</ul> 

Answer 1

あなたはこのためにJavaScriptを必要としない：

.nolinkdiv { display:none; } 
ul li a[href=""] { 
    display: none; 
} 
ul li a[href=""] + div { 
    display: block; 
} 

Answer 2

$(document).ready(function() { 
 
    $('ul li').each(function(idx, li) { 
 
     var LI = $(this); 
 
     var hrefValue = LI.find("a").attr('href'); 
 
     if(hrefValue) { 
 
      LI.find("div").hide() 
 
     } else { 
 
      LI.find("a").hide() 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="/register.html">Register</a> 
 
    <div class="">Register Coming Soon</div> 
 
    </li> 
 
    <li> 
 
    <a href="">Register</a> 
 
    <div class="">Register Coming Soon</div> 
 
    </li> 
 
</ul>