jquery - Jquery：最後に表示された直接の子を選択

Question

<div class="menu-items-wrapper" style="width: 547px;">
   <div class="one" style="height: 134px;">
   <div class="two" style="display:none;height: 134px;">
   <div class="other" style="height: 134px;">
   <div class="new" style="display: none; height: 134px;"></div>
</div>

上記のhtmlから最後に表示される直接の子を取得したいと思います。すべての子 div にはさらに多くの html があることに注意してください。そのため、直接の子が必要です。

現時点で持っているもの

  jQuery(".menu-items-wrapper > div").find(":visible:last-child").css("border-right","0px");

また

  jQuery(".menu-items-wrapper > div").find(":visible:last").css("border-right","0px");

しかし、最後の直接の子に境界線を持たせることはできません。誰でも助けてくれますか

ページに12回のようなdivがあり、すべての出現に適用したいことを忘れていました。現時点では、最後のアイテムにのみ取り組んでいます

Answer 1

.find()指定された要素のセット内で子を探しますが、ここでは要素を生成しません。これが実行されるセットは DOM 内の要素の最下位レベルであるためです。

セレクター:visible:lastにすぐに適用する必要があります。div

$(".menu-items-wrapper > div:visible:last").css("border-right","0px");​

デモ

.find()親ノードで実行する必要があるため：

$(".menu-items-wrapper").find("div:visible:last")

あるいは単に

$(".menu-items-wrapper").find(":visible:last")

---

編集

コメントへの追加を説明するため。menu-items-wrapper複数の要素があるシナリオで:lastは、セット内の最後の要素が常に選択されるため、この方法では使用できません。一方:last-child、各コンテナーの最後の要素が常に必要な場合は機能しますが、最後の子が最後に表示される子ではない可能性があるため、これはもちろん当てはまりません。

そのシナリオでは、コンテナーを反復処理する必要があります。

$(".menu-items-wrapper").each(function() {
    $('div:visible:last', this).css("border-right","0px");
});

デモ

Answer 2

使用するjQuery('.menu-items-wrapper').children('div:visible:last').css(borderRight: '0px');