使用JQuery选择第二个元素

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

使用$(this).closest('li').prev().find(".tldate")访问对应于timeline-panel的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>