如何获得推荐的插槽？

Question

目前我正在获得课程slot的所有第一个元素，这些元素在其后面有足够的元素，同时也没有.alreadyBooked。< / p>

＆＃13;

＆＃13;

$(document).ready(function(){
	addPopOverEvery(2, '.slot:not(.alreadyBooked)');
});

function addPopOverEvery(n, selector) {
	$(selector).each(function() {
		var $original = $(this),
		$self = $(this),
		$is_pop = true,
		i = 0;
		if ($original.prev().is(selector)) {
			for (i = 1; i < n; i++) {
				$self = $self.prev();
				if (!$self.is(selector) || $self.find('.popOver').length) {
					$is_pop = false;
					break;
				}
			}
		}
		if ($is_pop) {
			$self = $original;
			for (i = 1; i < n; i++) {
				$self = $self.next();
				if (!$self.is(selector)) {
					$is_pop = false;
					break;
				}
			}
		}
		if ($is_pop) {
			$original.append("<div class='popOver'>This slot would be recommended</div>");
            $original.css("color", "green");
		}
	});
}

＆＃13;

.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 120px;
   opacity: 0.5;
   color: white!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="slot">15:10 18/08/2016</li>
  <li class="slot">15:15 18/08/2016</li>
  <li class="slot alreadyBooked">15:20 18/08/2016</li>
  <li class="slot alreadyBooked">15:25 18/08/2016</li>
  <li class="slot">15:30 18/08/2016</li>
  <li class="slot">15:35 18/08/2016</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

现在我希望能够做同样的事情但让它根据插槽时间选择推荐的插槽。

E.g。

<ul>
  <li class="slot">15:10 18/08/2016</li> <---- So this would be recommended 
  <li class="slot">15:15 18/08/2016</li>
  <li class="slot alreadyBooked">15:20 18/08/2016</li>
  <li class="slot alreadyBooked">15:25 18/08/2016</li>
  <li class="slot">15:30 18/08/2016</li> <--- This would be accepted but not recommended because the slot time isn't the earliest
  <li class="slot">15:35 18/08/2016</li>
</ul>