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'); 
});​ 

내부의 기능을 타겟 컨테이너 하는 방법을 사용합니다, 당신은 당신은 단지 당신이 원하는 요소가 영향을 수에 영향을 확인 할 수 있습니다.