jquery - Jqueryで表示される場合にのみ、最後の子にカスタムCSSを追加する方法は?

Question

ユーザーがリストの一部を非表示/表示などにできるようにしています。

ここに私のリストがあります：

基本的なリストですが、一番最後のリスト項目にはカスタム CSS "border-bottom: none" があります - 見栄えを良くするためだけです。

<ul>
      <li class="item">Item</li>
      <li class="widget">widget</li>
      <li class="item">Item</li>
      <li class="item">Item</li>
      <li class="widget">Widget</li>
      <li class="widget">Widget</li>
</ul>

最後のセレクターを使用してカスタム CSS を追加すると、完璧に機能します。私の問題は、ウィジェットを非表示にすると、意図したとおりに非表示になりますが、これでカスタム CSS が使用され、これらが非表示になっているため、境界線がまだ表示されます。

私の質問は、最後に表示されている子だけに CSS を適用するにはどうすればよいですか?

Answer 1

「:visible」セレクターを使用します。

$("li:visible:last").css("your css rules");