값으로 html 요소를 찾는 방법

Question

값으로 html 요소를 찾고 싶습니다. 나는 ID로했지만, 내 경우는 깨지기 쉬운 :

의사 코드 :

for user in users: 
<li id="followed" onclick="follow($(this).text())"><a class="follow">user.name</a></li> 
endfor 

내가 각 사용자 이름을 클릭 할 수 있음을 원하고 내가 DB로 그를 저장하고에 "저장"추가 해요 사용자 이름의 끝 부분. like :

"username" ==> after click: "username saved" 

저는 이것을 ajax를 통해합니다.

function follow(data){ 
    var Him = data; 
    alert(Him); 
    $.ajax({ 
     url: "/follow", 
     type: "POST", 
     datatype: "html", 
     data: {Him: Him} 
    }).success(function(response){ 
     $('#followed').append(response); 
    }); 
} 

이 코드는 괜찮지 만, 루프의 말에, 모든 사용자 이름이 id='followed'을 가지고 있기 때문에, 첫 번째 이름에 "저장"응답을 추가한다.

그래서 HTML 요소를 그 값으로 찾고 싶습니다. 예 : "사용자 이름".
가능합니까?

Answer 1

context 매개 변수를 사용하여 AJAX 요청의 성공 콜백에 전달 된 컨텍스트를 변경할 수 있습니다.

그러나 먼저이 루프 인 경우의 당신의 마크 업을 청소 대신 ID의 클래스 이름을 사용하여 시작하자 당신이 ID를 HTML에서 고유해야합니다 알고 있기 때문에 우리가 청소 한 것을 지금,

for user in users: 
    <li class="followed"><a class="follow">user.name</a></li> 
endfor 

좋아 마크 업까지의이 <li>의 .click() 이벤트에 겸손하게 가입하자 고유해야합니다 페이지에 속성 id`

$(function() { 
    $('.followed').click(function() { 
     // Remark: maybe you wanna get just the username inside the anchor in which case 
     // you probably need "var Him = $('a', this).text();" 
     var him = $(this).text(); 
     $.ajax({ 
      url: '/follow', 
      type: 'POST', 
      dataType: 'html', 
      context: this, // <!-- Here, that's the important bit 
      data: { him: him }, 
     }).success(function(response) { 
      // since we have used the context, here 'this' will no 
      // longer refer to the XHR object (which is the default) but 
      // to whatever we have passed as context (in our case this 
      // happens to be the <li> that was clicked) => we can be certain 
      // that we are updating the proper DOM element 
      $(this).append(response); 
     }); 
    }); 
});