Greasemonkey 스크래퍼 코드는 단어 대신 문자를 사용합니까?

Question

일부 스포츠 데이터를 긁어 내고 페이지 상단의 테이블에 배치하는 간단한 사용자 스크립트를 작성하고 있습니다. 그러나 각 팀 이름을 자체 행에 배치하는 대신 각 단어를 개별 문자로 분리하여 행에 배치합니다.

소스 HTML :

<span class="team-title" id="firstTeamName">Oakland Raiders</span> 

샘플 코드 :

$(document).ready(function() { 

$('#navFixed').after('<table id="tbone"></table>'); //navFixed is just an element at the top of the page 

var team1 = $('span#firstTeamName').text(); 

for (var i = 0; i < team1.length; i++) { 
    var txt = $('<tr><td></td></tr>').text(team1[i]); 
    $('#tbone').append(txt); 
    } 
}); 

샘플 HTML 출력 :

<table id="tbone"> 
    <tr><td>O</td></tr> 
    <tr><td>a</td></tr> 
    <tr><td>k</td></tr> 
    <tr><td>l</td></tr> 
    ... 
</table> 

이상적인 출력 :

<table id="tbone"> 
<tr>Oakland Raiders</tr> 
</table> 

의견이 있으십니까?

Answer 1

.text() returns a string 원하는 것을 선택하십시오. 문자열을 반복하면 개별 문자가 생성됩니다. 그러지 마. ;)

나는 당신이 팀을 돌고 싶다고 생각한다. 모든 .team-title 노드를 선택하고 jQuery's .each()을 사용하여 루핑합니다.

$("button").click (function() { 
 
    //--- Greasemonkey javascript follows... 
 
    var targTble = $('<table id="tbone"></table>').insertAfter ("#navFixed"); 
 
    var teams  = $(".team-title"); 
 

 
    teams.each (function() { 
 
     var teamName = $(this).text().trim(); //-- Always beware of whitespace 
 
     targTble.append ('<tr><td>' + teamName + '</td></tr>'); 
 
    }); 
 
    //--- End of Greasemonkey javascript. 
 
    this.disabled = true; 
 
});

.team-title {background: #ddd; font-size: 80%;} 
 
table {border-collapse: collapse;} 
 
table, td {border: 1px solid green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<span id="navFixed"></span><br> 
 
<span class="team-title" id="firstTeamName">Oakland Pirates</span><br> 
 
<span class="team-title" id="firstTeam_02"> San Fran Gold diggers</span><br> 
 
<span class="team-title" id="firstTeam_03"> Dallas Cow pokes</span><br> 
 
<button>Run Greasemonkey code</button>

:
이 코드를 참조하십시오