Есть ли способ выбрать какой-либо контент после определенного класса в CSS? - PullRequest
0 голосов
/ 11 января 2019

Используя следующие примеры HTML:

<!-- Example 1 --->
<span class='my-class'>Content</span>
Some more content.

<!-- Example 2 --->
<div class='my-class'>Content</div>
Some more content.

<!-- Example 3 --->
<p class='my-class'>Content</p>
Some more content.

Есть ли способ выбрать «Еще немного контента». часть примеров в CSS без изменения кода? Цель всего этого состояла в том, чтобы избежать разрывов строк после элемента «my-class».

Я знаю, что есть решения, которые делают это, просто добавляя контейнер вокруг элемента класса и следующего содержимого, но опять же, я ищу решение, использующее этот точный код. Это возможно?

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Вы можете сделать это с помощью функции jQuery siblings .

$(".my-class").each(function(e){
	console.log($(this)[0].nextSibling.textContent)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Example 1 --->
<span class='my-class'>Content</span>
Some more content.

<!-- Example 2 --->
<div class='my-class'>Content</div>
Some more content.

<!-- Example 3 --->
<p class='my-class'>Content</p>
Some more content.
0 голосов
/ 11 января 2019

Основываясь на моей многолетней работе с CSS, короткий ответ - нет. Я думаю, что вы можете сделать это, только добавив какой-то контейнер, хотя он не должен быть вокруг обоих элементов, как вы указали, желая избежать ... вы, конечно, можете просто обернуть его вокруг свободного текста. Но я уверен, что вы уже знали это.

Ничего не зная об этом, я могу думать только о том, чтобы нацелить свободный текст с помощью более высокого элемента DOM, например, затем перезаписать текст, специфичный для класса. Я предполагаю, что вы уже знаете, как это сделать, и что это, вероятно, не поможет, но вот пример для иллюстрации:

body {
  color: red;
  }
  
.my-class {
  color: black;
  }
<html>
<body>
<!-- Example 1 --->
<span class='my-class'>Content</span>
Some more content.

<!-- Example 2 --->
<div class='my-class'>Content</div>
Some more content.

<!-- Example 3 --->
<p class='my-class'>Content</p>
Some more content.

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...