JQueryで前の2番目の要素を選択

Question

JQueryで要素を選択する際に問題があります。 私が必要とするのは、タイムラインパネル上にマウスを置くと日付に影響を与えることです。パネルの日付のみを選択します。

$(function() { 
 
    "use strict"; 
 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 

 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tldate").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tldate").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 
});

.timeline-panel { 
 
    background-color: #FFF; 
 
} 
 
.timeline li .tl-circ { 
 
    position: absolute; 
 
    top: 23px; 
 
    left: 50%; 
 
    text-align: center; 
 
    background: #fff; 
 
    color: #fff; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    margin-left: -16px; 
 
    border: 3px solid #90acc7; 
 
    border-top-right-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
    z-index: 1000; 
 
    -webkit-transition: all .27s ease-in-out; 
 
    transition: all .27s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="timeline"> 
 
    <li> 
 
    <div class="tldate"> 
 
     <div class="movement"></div>JAN 2008 - DEC 2012</div> 
 
    </li> 
 
    <li> 
 
    <div class="tl-circ"></div> 
 
    <div class="timeline-panel"> 
 
     <div class="tl-heading"> 
 
     <h4>UNIVERSITY OF ENGINEERING</h4> 
 
     <p><small class="text-muted">Bachelor of Science</small> 
 
     </p> 
 
     </div> 
 
     <div class="tl-body"> 
 
     <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

前円に適用タイムラインパネル色の効果に置くと、あなたは、このコードスニペットで見るように。 でも前のの日付に反映させる必要があります。 私は多くのことを試みましたが、私はそれを得ていませんでした。 タイムラインパネルが複数あることを覚えておいてください。現在のパネルの前の日付にのみ効果を適用したいと思います。 ありがとうございます。

Answer 1

timeline-panelに対応するtldateにアクセスするには、$(this).closest('li').prev().find(".tldate")を使用します。

デモは、以下を参照してください：

$(function() { 
 
    "use strict"; 
 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    $(this).closest('li').prev().find(".tldate").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#fff' 
 
    }); 
 
    $(this).closest('li').prev().find(".tldate").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 

 

 
});

.timeline-panel { 
 
    background-color: #FFF; 
 
} 
 
.timeline li .tl-circ { 
 
    position: absolute; 
 
    top: 23px; 
 
    left: 50%; 
 
    text-align: center; 
 
    background: #fff; 
 
    color: #fff; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    margin-left: -16px; 
 
    border: 3px solid #90acc7; 
 
    border-top-right-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
    z-index: 1000; 
 
    -webkit-transition: all .27s ease-in-out; 
 
    transition: all .27s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="timeline"> 
 
    <li> 
 
    <div class="tldate"> 
 
     <div class="movement"></div>JAN 2008 - DEC 2012</div> 
 
    </li> 
 
    <li> 
 
    <div class="tl-circ"></div> 
 
    <div class="timeline-panel"> 
 
     <div class="tl-heading"> 
 
     <h4>UNIVERSITY OF ENGINEERING</h4> 
 
     <p><small class="text-muted">Bachelor of Science</small> 
 
     </p> 
 
     </div> 
 
     <div class="tl-body"> 
 
     <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>