배열의 요소에 대한 JQuery .text()

동일한 클래스 이름을 갖고 앵커 태그 인 HTML 문서의 모든 요소를 찾아서 텍스트를 가져 오려고합니다.배열의 요소에 대한 JQuery .text()

HTML :

<div class="links" id="one"> 
<span class="info">useless links</span> 
     <a class="anchorTag" href="www.sample.com">Click me!</a> 
     <a class="anchorTag" href="www.sample.com">Click me again!</a> 
     <a class="anchorTag" href="www.sample.com">Click me once again!</a> 
     <a class="anchorTag" href="www.sample.com">Click me one last time!</a> 
    </div> 
<div class="links" id="two"> 
<span class="info">secret links</span> 
     <a class="anchorTag" href="www.sample.com">Click me!</a> 
     <a class="anchorTag" href="www.sample.com">Click me again!</a> 
     <a class="anchorTag" href="www.sample.com">Click me once again!</a> 
     <a class="anchorTag" href="www.sample.com">Click me one last time!</a> 
    </div>

코드 :

$('.links').each(function(){ 
if($(this).find("span.info").text() == "secret link"){ 
var allLinks = $(this).find("a.anchorTag"); 
console.log(allLinks[0].text()); 
} 
});

오류 : 나는 VAR의 길이를 allLinks를 인쇄 할 경우

console.log(allLinks[0].text()) is not a function

, 그것은 올바른 크기를 반환하지만, i에 액세스 할 때 배열의 특정 요소의 텍스트를 인쇄하지 않습니다. 색인과 함께? 왜 이렇게이다?

출처

2016-07-26 Bajro

allLinks 실제 배열이 아니라 DOM 요소의 집합 :

그래서 대신 jQuery를 다시 가입 소자 포장. 즉 정상적인 배열 연산자는 작동하지 않습니다. 이 같은) 방법을

console.log(allLinks[0].text());

당신은 JQuery와 좁은 방을 (사용해야합니다 : 당신이 아니라이보다 세트에서 첫 번째 요소의 텍스트를 인쇄 할 경우

console.log(allLinks.first().text());

출처

2016-07-26 20:32:05 Cameron637

아아아 ... 나는 그것이 세트라는 것을 알지 못했지만이 주제에 대한 나의 전체적인 질문은 분명합니다. 그래서 집합을 배열로 변환하는 것이 가능할 것입니다 만, anchorTag에 직접 주소를 지정하고 텍스트를 파싱하는 것으로 가정합니다. – Bajro

jquery의 .toArray()를 사용하여 true 배열로 변경할 수 있습니다. 메서드를 사용하지만 jquery로 다시 래핑하지 않으면 더 이상 jquery 연산을 수행 할 수 없습니다. – Cameron637

인덱스로 jQuery 결과에 액세스하면 실제 요소 자체가 반환됩니다.

따라서 < 요소에 > 요소에 text() 함수가 없다는 오류 메시지가 표시됩니다 (사실).

var el = allLinks[0]; 
console.log($(el).text());

출처

2016-07-26 20:31:51 chardy

을 당신은 시도해야 목록을 반복하고 자식을 찾는 대신 원하는 클래스가있는 모든 앵커를 반복합니다.

$('a.anchorTag').each(function(){ 
    if($(this).text() == "secret link"){ 
     console.log($(this).text()); 
    } 
});

jsFiddle 예 : https://jsfiddle.net/a51q9ry3/

출처

2016-07-26 20:34:01 Hodrobond

ok ... 위와 같이 똑같이하려고하는 for 루프를 만드는 대신 원하는 CSS Selector에 ".each()"함수를 사용하는 것이 더 낫습니다. – Bajro

구문 적으로 읽기 쉽고 표현하려는 논리를보다 정확하게 나타낼 수 있다고 생각합니다. 이것은 클래스를 말한 앵커 컬렉션 전체를 반복하는 한 가지 방법입니다. 당신의 질문은 "클래스와 앵커 인 요소를 찾고 싶습니다."(문자 그대로 =) '$ ('a.anchorTag')'는 클래스가 "anchorTag"인 모든 앵커 요소를 포함하는 배열을 반환합니다. – Hodrobond

당신은 문서 전체에 걸쳐 직접 각 루프를 사용할 수 있습니다.

<div class="links" id="one"> 
<span class="info">useless links</span> 
    <a class="anchorTag" href="www.sample.com">Click me!</a> 
    <a class="anchorTag" href="www.sample.com">Click me again!</a> 
    <a class="anchorTag" href="www.sample.com">Click me once again!</a> 
    <a class="anchorTag" href="www.sample.com">Click me one last time!</a> 
</div> 
<div class="links" id="two"> 
<span class="info">secret links</span> 
    <a class="anchorTag" href="www.sample.com">Click me!</a> 
    <a class="anchorTag" href="www.sample.com">Click me again!</a> 
    <a class="anchorTag" href="www.sample.com">Click me once again!</a> 
    <a class="anchorTag" href="www.sample.com">Click me one last time!</a> 
</div> 
<div id="output"> 
</div> 

var out = $("#output"); 
$('a.anchorTag').each(function(){ 
    var elem = $(this); 
    out[0].innerHTML += elem.text(); 
    console.log(elem.text()); 
});

여기 당신은 전체 HTML 본문 검색하는 바이올린 JSFiddle

, 왜 경우 사건?

출처

2016-07-26 20:56:58 Livingstone

배열의 요소에 대한 JQuery .text()

답변

관련 문제