选择第一个元素时，工具提示未显示第一个元素的左侧

时间：2016-10-04 12:44:52

标签： javascript jquery css

在我的下面的代码中是我到目前为止的一个例子。我使用$('.recommended_slot:first')找到要附加我的工具提示的元素，但是当它附加时，它会显示在第一个推荐的插槽的下一个元素旁边。

如果有人提出如何更好地做到这一点或为什么它搞乱了。那么听听任何建议会很棒。谢谢:)）

JSFIDDLE EXAMPLE

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

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.addClass("recommended_slot");
			$original.css("color", "red");
		}
	});
}

function findBestRecommendedSlot(){
  $('.recommended_slot:first').text('recommended');
  $('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
  
  
}
＆＃13; 
.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 120px;
   opacity: 0.5;
   color: white!important;
}

.tooltiptext {
	width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-right: 330px;
    z-index: 1;
    display: inline-block;
    float: right;
    margin-top: 5px;
    margin-bottom: -5px;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    margin-left: -112px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
＆＃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;

2 个答案:

答案 0 :(得分：2)

它实际上是正确的，只有你的CSS搞砸了..;）

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

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.addClass("recommended_slot");
			$original.css("color", "red");
		}
	});
}

function findBestRecommendedSlot(){
  $('.recommended_slot:first').text('recommended');
  $('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
  
  
}
＆＃13; 
.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 120px;
   opacity: 0.5;
   color: white!important;
}

.tooltiptext {
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: 10px;
    z-index: 1;
    display: inline-block;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    margin-left: -115px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
＆＃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;

这是查理的特别之处！吻！

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

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.addClass("recommended_slot");
			$original.css("color", "red");
		}
	});
}

function findBestRecommendedSlot(){
  $('.recommended_slot:first').text('recommended');
  $('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
  
  
}
＆＃13; 
.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 120px;
   opacity: 0.5;
   color: white!important;
}

.tooltiptext {
    position: absolute;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: 10px;
    z-index: 1;
    display: inline-block;
    margin-top: -13px;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    margin-left: -115px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
＆＃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;

答案 1 :(得分：2)

还有一个想法

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

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.addClass("recommended_slot");
			$original.css("color", "red");
		}
	});
}

function findBestRecommendedSlot(){
  $('.recommended_slot:first').text('recommended');
  $('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
  
  
}
＆＃13; 
.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 120px;
   opacity: 0.5;
   color: white!important;
}

.tooltiptext {
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: 10px;
    z-index: 1;
    position: absolute;
    top: 2px;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    margin-left: -115px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
＆＃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;

相关问题
最新问题