Выберите перед братом с CSS или JavaScript для нумерации страниц

Question

.pagination__pages span.ng-scope:first-of-type + a {
  display: none;
}

<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>

У меня есть эта нумерация страниц, и я пытаюсь удалить элементы, которые идут сразу после и перед определенным классом.

Вот иллюстрация

Как вы можете видеть, я пытаюсь удалить «2» и «6», которые приходятпосле и до «...».

Я могу скрыть первого, но у меня возникают проблемы при попытке скрыть «предыдущего родного брата» для второго.

Я бы предпочел CSS-решение, если это возможно, если его нет, то с JavaScript или jQuery тоже подойдет.

Любая помощь высоко ценится.

Answer 1

Вот код jQuery, который нужно скрыть до и после элементов.

jQuery(document).ready(function($) {
  $('.pagination__pages span:contains("...")').each(function(index){
    if(index < 1){
      $(this).next().hide();
    }
    else{
      $(this).prev().hide();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>

Answer 2

Вы можете скрыть их с помощью CSS, на самом деле не скрывая их, а до и после того, как элементы могут перекрываться. Вот пример.

.pagination__pages > * {
	box-sizing: border-box;
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	background-color: #fff;
}

.pagination__pages span.ng-scope:not(.ng-binding) {
	margin-right: -24px;
	position: relative;
}

.pagination__pages span.ng-scope:not(.ng-binding) ~ span.ng-scope:not(.ng-binding) {
	margin-left: -24px;
	margin-right: 0;
}

<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>