jQuery는 동일한 클래스의 여러 인스턴스에서 성을 전체 이름으로 대체합니다.

Question

여러 인스턴스가있는 .label-name 클래스에 전체 이름이 있습니다.

<span class="label-name">Joe Demo</span> 
<span class="label-name">Jane Demo</span> 
<span class="label-name">Lisa Demo</span> 

어떻게 전체 이름을 주먹 이름으로 바꿀 수 있습니까?

Answer 1

텍스트를 가져 와서 공백으로 나누고 첫 번째 요소를 가져올 수 있습니다. 예를 들어

:

$(document).ready(function() { 
    var fullName = $(".label-name").first().text(); //This will get the text from the first element with the class label-name 
    var nameArray = fullName.split(" "); //Split the text by spaces into an array 
    var firstName = nameArray[0]; //Take the first element of the array 
    $(".label-name").first().text(firstName); //Set the text of the first element with the class label-name to the first name 
}); 

편집 : 코멘트에 언급 한 바와 같이,이 클래스 레이블 이름을 가진 첫 번째 요소를 얻을 것이다. 이 클래스에 여러 요소가있는 경우 다른 선택기가 필요할 수 있습니다. jQuery 선택자는 http://api.jquery.com/category/selectors/에 문서화되어 있습니다. 전체 HTML 소스를 게시하고 원하는 요소를 알려 주시면 추가 조언을 제공 할 것입니다.

EDIT 2 : 동일한 클래스로 여러 요소를 선택하고 바꿔야하는 경우 코드에서 .first() 선택자를 삭제하고 루프를 사용하여 결과를 편집 할 수 있습니다. 예 :

$(document).ready(function() { 
    var fullNameObjects = $(".label-name"); 
    $.each(fullNameObjects, function() { 
     var nameArray = this.split(" "); 
     var firstName = nameArray[0]; 
     this.text(firstName); 
    }); 
});