jQuery如何适用于每个块

Question

我从PHP/MYSQL获得了文本输出，并且我使用以下jQuery来限制文本并执行一些显示/隐藏效果。它适用于第一个块，但如果我通过php循环的项目，所有块都更改为一个相同的内容，有没有办法让jQuery适用于每个块？

function excerpt(str, nwords) { 
    var words = str.split(' '); 
    words.splice(nwords, words.length - 1); 
    return words.join(' ') + '…'; 
} 

var $div = $('.container'); 
var excerpt = excerpt($div.text(), 30); 

$div.data('html', $div.html()).html(excerpt); 

$('button').click(function() { 
    var isHidden = $(this).text() == 'Show'; 
    $div.html(isHidden ? $div.data('html') : excerpt); 
    $(this).text(isHidden ? 'Hide' : 'Show'); 
});​ 

HTML：

<div class="container"> 
    Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus. 
     Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus. 
    <div class="myimage">picture</div> 
    <div class="myimage">picture</div> 
    <div class="myimage">picture</div> 
</div> 
<button>Show</button> 




<div class="container"> 
    Curabitur sed mauris at eros viverra fringilla in a ipsum. Aliquam erat volutpat. Integer quis arcu mauris. Cras diam dui, porta non egestas in, auctor ornare nunc. Donec quam ligula, vulputate quis sodales ultricies, gravida vitae augue. Ut ut nibh nisi. Phasellus placerat odio sed mauris accumsan tincidunt. Nunc orci eros, posuere sollicitudin posuere eget, condimentum imperdiet mi. Sed ornare felis sit amet lectus viverra at blandit erat aliquam. Sed laoreet ante consequat elit vestibulum commodo. In sed rutrum lorem. Integer sagittis placerat mi, at tristique nunc consectetur sit amet. Quisque nec nulla eget lacus condimentum iaculis eget id neque. Praesent sagittis, elit non porttitor cursus, justo elit lobortis magna, vitae interdum magna arcu et sem. 
    <div class="myimage">picture 3</div> 
    <div class="myimage">picture 5</div> 
    <div class="myimage">picture 6</div> 
</div> 
<button>Show</button> 
​ 

示例：http://jsfiddle.net/BqesP/

Answer 1

的问题是，你要引用整个集的点击事件处理中的容器元素。因此，无论何时点击任何按钮，您都将该功能应用于所有.container元素。这里有一个快速的变化来解决它：

function excerpt(str, nwords) { 
    var words = str.split(' '); 
    words.splice(nwords, words.length - 1); 
    return words.join(' ') + '…'; 
} 

var $div = $('.container'); 

$div.each(function() { 
    var theExcerpt = excerpt($(this).text(), 30); 
    $(this).data('html', $(this).html()).html(theExcerpt); 
}); 

$('button').click(function() { 
    var isHidden = $(this).text() == 'Show'; 
    var $div = $(this).prev(); 
    var theExcerpt = excerpt($div.text(), 30); 
    $div.html(isHidden ? $div.data('html') : theExcerpt); 
    $(this).text(isHidden ? 'Hide' : 'Show'); 
});​ 

通过获取目标容器内的功能，你可以确保你只影响您想要的元素来实现。