jQuery 从选定项中获取上一个或下一个项目答案

【问题标题】：jQuery get prev or next item from selectedjQuery 从选定项中获取上一个或下一个项目
【发布时间】：2013-08-11 18:33:02
【问题描述】：

我有这个大拇指列表

<ul>
   <li class='thumb'></li>
   <li class='thumb chosen'></li>
   <li class='thumb'></li>
   <li class='thumb'></li>
</ul>

我也有导航箭头，prev 和 next 类“next-image”和“prev-image”。当我点击导航箭头时，我想在上一个或下一个拇指上触发点击事件。

如何从选择类的拇指中定位上一个或下一个拇指。

$('.prev-image').click( function() {
    $('.thumb.chosen').prev().trigger('click');

});
$('.next-image').click( function() {
    $('.thumb.chosen').next().trigger('click');
});

这样它会搜索选择类的下一个兄弟，但我需要它从选择类的拇指中搜索上一个或下一个拇指。

【问题讨论】：

尝试引用您的属性，它可能会解决一些问题。
你可以为你的问题创建小提琴......它可以帮助你轻松解决你的问题，谢谢。
这里忘记引用了，抱歉，更新不好
您的代码将完全按照您的意愿行事
你的代码哪里出错了？相反，它做了什么？我们能否看到 all 相关的 HTML（您似乎忘记了包含按钮）。开发者控制台中是否有任何错误？我们能看到一个（简单/sscce）live demo吗？

标签： javascript jquery

【解决方案1】：

为您的class 属性添加引号：

<ul>
   <li class="thumb"></li>
   <li class="thumb chosen"></li>
   <li class="thumb"></li>
   <li class="thumb"></li>
</ul>

我猜chosen 被浏览器解释为另一个属性。

jQuery

$('.prev-image').click( function() {
    $('.thumb.chosen').prev().trigger('click');

});
$('.next-image').click( function() {
    $('.thumb.chosen').next().trigger('click');
});

$(".thumb").click(function () {
    $(".thumb").removeClass("chosen");
    $(this).addClass("chosen");
});

CSS

.thumb {
    width: 100px;
    height: 100px;
    background: blue;
    margin: 5px;
}

.chosen {
    background: red !important;
}

JSFIDDLE

【讨论】：

对不起，我忘了在示例中添加引号，这不是问题

【解决方案2】：

这里可以触发事件如下

HTML 代码：

<div class="prev-image">prev</div>
<div class="next-image">next</div>
<ul>
   <li class='thumb'>1</li>
   <li class='thumb chosen'>2</li>
   <li class='thumb'>3</li>
   <li class='thumb'>4</li>
</ul>

jquery：

// prev thumb trigering
$('.prev-image').click( function() {  
    var element = $('.thumb.chosen');

    $('.thumb.chosen').prev().trigger('click');
    $('.thumb.chosen').prev().addClass("chosen");
    element.removeClass("chosen"); 
});

// next thumb trigering
$('.next-image').click( function() { 
    var element = $('.thumb.chosen');

    $('.thumb.chosen').next().trigger('click');
    $('.thumb.chosen').next().addClass("chosen");
    element.removeClass("chosen");     
});

// trigger on click .thumb
$('.thumb').click(function() {
    var value = $(this).text();
    alert("triggered " + value);
});

CSS：

.chosen { color: red; }

在这里实现 http://jsfiddle.net/jaJeD/

【讨论】：