Выберите элемент .next () с определенным атрибутом JQUERY. - PullRequest
Новая
       24

Выберите элемент .next () с определенным атрибутом JQUERY.

5 голосов
/ 26 июля 2011

Вот что у меня есть: 

$("#comment").next().attr('shown',0).fadeIn();

Я пытаюсь показать следующий комментарий, который скрыт на странице.Тем не менее, я пытаюсь сделать два комментария, показанные одновременно, поэтому, если вы нажмете первый, второй будет следующий.Итак, я дал атрибут показанный .Я хотел бы выбрать СЛЕДУЮЩИЙ с атрибутом shown=0.Выше не работает.Я верю, что это будет next(tr[shown=0]), но я не могу заставить это работать (я нахожусь в таблице, ищущей следующую строку)

любая помощь приветствуется!

Ответы [ 3 ]

11 голосов
/ 26 июля 2011

next может вернуть только ближайшего родственника.

Вы можете вызвать nextAll, который возвращает всех последующих братьев и сестер, с помощью селектора :first, чтобы получить первый соответствующий: 

$(...).nextAll("tr[shown=0]:first")
2 голосов
/ 24 августа 2016

Я знаю, что это старый пост, но, просто следуя названию, первый ответ отбросил меня.Однако ответ @SLaks - это именно то, что я искал лично, и исправил мою проблему.

Это на самом деле очень помогло мне в совершенно другой ситуации, когда я просто нашел этот пост.Этот ответ является лучшим, как упомянуто в его ответе.

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

  <div class="blah" data-field="sometext" data-index="1"></div>

Надеюсь, это поможет кому-то еще, поскольку это очень помогло мне

1 голос
/ 26 июля 2011

Ответ SLaks будет работать, но я бы не стал использовать пользовательские атрибуты в вашем HTML, так как это может запутать другого разработчика в будущем.Что-то вроде этого не будет использовать никаких пользовательских атрибутов: 

<style>
.hidden {
    display:none;   
}
</style>

<script>
$(document).ready(function(){ 
   $('.showmore').click(function(){ 
       $(this).parent().nextAll(':hidden:first').removeClass('hidden');
   })
});
</script>

<div id="comments">
<div class="comment" id="comment1">
    Test comment        
    <a href="#" class="showmore">Show More</a>
</div>
<div class="comment" id="comment2">
    2nd test comment
    <a href="#" class="showmore">Show More</a>
</div>
<div class="comment hidden" id="comment3">
    3rd test comment
</div> 
<div class="comment hidden" id="comment4">
    4th test comment
</div>   
</div>

Демо

...