jquery - .closest() 的切换类

Question

    $(".toggle-more-less").click(function() {
        $(this).closest(".article").toggleClass("show-hide");          
    });

我正在尝试为智能手机大小的网站切换文章长度以节省空间。

我认为这会起作用 - 但我猜我不明白 .closest() 。

这是一个jsfiddle。

任何方向都是 GRRRRREAT！

Answer 1

$(this) means the items that initiated the function, so in this case '$(".toggle-more-less")'. Closest will look for the closest parent to $(this) that fits the set criteria, so in this case it will traverses the dom upwards until it reaches a 'figure'.

$(this).closest('figure').find("figcaption").toggleClass("show");

Fiddle: http://jsfiddle.net/6whzQ/

Answer 2

一个快速的解决方案是这样的：$(this).parent().find("figcaption").toggleClass("show");

Answer 3

http://jsfiddle.net/q7kjr/3/

$(this).prev().toggleClass("show");
$(this).prev("figcaption").toggleClass("show");
$(this).closest('figure').find("figcaption").toggleClass("show");

文档：

http://api.jquery.com/prev/

http://api.jquery.com/closest/