javascript — jquery prev-next видимый селектор

jquery prev-next видимый селектор

Ну, поскольку вы заявили, что хотите выбрать next или ранее видимый элемент, я предполагаю, что вы хотите только один из них, и он должен быть ближайшим между ними. Чтобы достичь этого, одним из решений является выбор следующего видимого, предыдущего видимого и сравнение между ними, которое является ближайшим. Итак, с учетом следующего макета:

 {amp}lt;div class='atitle'{amp}gt;a{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;b{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;c{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;d{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;e{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;f{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;g{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;h{amp}lt;/div{amp}gt; 

Нажатие на каждый элемент должно вернуть:

 ┌─────────────┬───────────────┐ │ Clicking on │ Should return │ ├─────────────┼───────────────┤ │ a │ c │ │ c │ d │ │ d │ c │ │ f │ d or h* │ │ h │ f │ └─────────────┴───────────────┘ 

* Поскольку d и h находятся на одинаковом расстоянии от f , если щелкнуть по последнему пункту, вы должны решить, какой из первых вы выберете, если хотите только один, в этом примере я выбираю оба.

 $('.atitle').on('click', function() { var $this = $(this); // Select the closest prev and next visible elements var $prev = $this.prevAll('.atitle:visible:eq(0)'); var $next = $this.nextAll('.atitle:visible:eq(0)'); // Check the indexes of each one var prevDiff = $prev.index() {amp}lt; 0 ? NaN : Math.abs($this.index() - $prev.index()); var nextDiff = $next.index() {amp}lt; 0 ? NaN : Math.abs($this.index() - $next.index()); // Decide which one should be selected if (isNaN(prevDiff) || nextDiff {amp}lt; prevDiff) { console.log( $next.text() ); } else if (isNaN(nextDiff) || prevDiff {amp}lt; nextDiff) { console.log( $prev.text() ); } else if (nextDiff === prevDiff) { console.log($prev.text(), $next.text()); } else { console.log('no element'); } }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class='atitle'{amp}gt;a{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;b{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;c{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;d{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;e{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;f{amp}lt;/div{amp}gt; {amp}lt;div class='atitle' hidden{amp}gt;g{amp}lt;/div{amp}gt; {amp}lt;div class='atitle'{amp}gt;h{amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector