Как проверить, есть ли после него элемент с достаточным количеством элементов с тем же именем класса?

ProgramBox

Как проверить, есть ли после него элемент с достаточным количеством элементов с тем же именем класса?

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css

Вопрос:

Как бы я popOver показывал только тогда, когда после него есть элемент с counter количеством элементов с тем же именем класса? (Счетчик будет включать первый элемент)

Пример: (Со счетчиком = 3)

 bar
bar
foo
bar
foo
foo
bar <-- PopOver would show up here
bar  
bar 
foo <-- PopOver would show up here
foo
foo
foo

Пример: (Со счетчиком = 2)

 bar <-- PopOver would show up here
bar 
foo
bar
foo <-- PopOver would show up here
foo 
bar <-- PopOver would show up here
bar  
bar
foo <-- PopOver would show up here
foo

 $(".bar").each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

 .bar {
    color: #000;
    text-decoration: none;   
}

.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 40px;
   opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="foo">Foo</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="foo">Foo</li>
</ul>

Ответ №1:

Вы можете использовать оператор. Селектор:

 .bar   .bar   .bar

Выбирает третий подряд .bar и делает все, что вы хотите сделать.

 $(".bar   .bar   .bar").each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

 .bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:400px;
  height: 30px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

Вы можете использовать .repeat функцию для ее настройки:

 var n = 3;

$(".bar"   "   .bar".repeat(n - 1)).each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

 .bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:400px;
  height: 30px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

Где n значением будет количество элементов с тем же классом.

1. Извините, я только что обновил свой вопрос, добавив немного больше информации.

2. @ChrisBeckett Я обновил свой ответ. Если это выглядит хорошо, пожалуйста, примите это. Заранее спасибо. :D

3. Взгляните на мой вопрос, я только что обновил его еще больше с помощью краткого примера. Заранее спасибо.

4. @ChrisBeckett Ты сказал подряд !!! И второй пример не согласуется… Запутанный мат.

5. @PraveenKumar Проблема в том, что он хочет всплывающее окно для первого элемента, а не для третьего. Итак, вам нужно проверить, есть ли три, не изменяя текущий выбор.

Ответ №2:

Немного улучшив ответ @Praveen Kumar, эта функция должна делать то, что вы хотите:

 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'><-- these would be recommended</div>");
		}
		console.log($original.get(0));
	});
}

addPopOverEvery(3, '.bar');

 .bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:300px;
  height: 30px;
  background: green;
  position: absolute;
  display: inline-block;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

С 2:

 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'><-- these would be recommended</div>");
		}
		console.log($original.get(0));
	});
}

addPopOverEvery(2, '.bar');

 .bar {
  color: #000;
  text-decoration: none;   
}

.bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:300px;
  height: 30px;
  background: green;
  position: absolute;
  display: inline-block;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

1. Существует проблема с addPopOverEvery(n); Например, как сказал @ZakariaAcharki, вы пробовали addPopOverEvery(2); потому что, если есть 3 элемента с одинаковым классом подряд, первый и второй элемент получают всплывающее окно

2. Добавлены все уловы, спасибо за отзыв. Как насчет сейчас?

3. @Makaze Спасибо за ответ, это то, что я хотел.

4. @Makaze Как я мог это сделать, если бы был такой класс, как class="bar" class="bar" class="bar foo" ? Я бы хотел, чтобы он разрешал только первые 2 элемента, потому что они без foo ?

5. @Makaze Извините за все комментарии, не беспокойтесь о предыдущем комментарии с вопросом… Я обнаружил, что могу сделать addPopOverEvery(2, ‘.bar:not(.foo)’); — Еще раз спасибо за ответ

Ответ №3:

Это невозможно сделать с помощью sign, поскольку у вас нет определенного class , поэтому вам нужно сделать это программно, используя if - else условие и счетчик, чтобы проверить, равно ли количество последовательных классов нашему счетчику, проверьте пример ниже.

Надеюсь, это поможет.

 var nbr = 3;
var count = 0;
var last_class = $('li:first').attr('class');

$('li').each(function(index)
{
  if( $(this).attr('class')===last_class )
  {
    count  ;
    last_class = $(this).attr('class');
  }else{
    count=1;
    last_class = $(this).attr('class');
  }

  if(count===nbr){
    $('li:eq(' (index-(nbr-1)) ')').append("<span class='popOver'> <= these would be recommended</span>");
    
    count=0;
  }
  
});

 .bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:250px;
  height: 18px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>