Select 具有 JQuery 的前第二个元素

Question

我对 JQuery 中的 selecting 元素有疑问。我需要的是当我将鼠标悬停在时间轴面板上时对日期产生影响。但只有 select 小组的日期。

$(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>

当您将鼠标悬停在 时间轴面板 上时，您会在这段代码片段中看到颜色效果应用在之前的圆圈上。但我还需要在之前的日期生效。我尝试了很多东西，但我没有得到它。请记住，我有不止一个 timeline panel 。我只想在当前面板的前一个日期应用效果。先感谢您。

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>

Select 具有 JQuery 的前第二个元素

Select second previous element with JQuery

html

javascript

css

jquery

jquery-selectors