CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
bajro
bajro

Reputation: 1250

JQuery .text() for element in array

I want to first find all elements in the html document which have the same class name and are an anchor tag and get the text out of it.

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>

Code:

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

Error:

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

If I print the length of the var allLinks, it returns the correct size, but it won't print the text of the specific element in the array when accessing it with the index? Why is that so?

Upvotes: 0

Views: 3154

Answers (4)

Nirmi
Nirmi

Reputation: 1119

You could use the each loop directly over the whole document.

<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());
});

Here's the fiddle JSFiddle

When You are searching for the whole html body, why the if case?

Upvotes: 0

Hodrobond
Hodrobond

Reputation: 1696

You should attempt to iterate all anchors that have the class you desire, instead of looping through the list and looking for the children.

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

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

Upvotes: 1

Cameron637
Cameron637

Reputation: 1719

allLinks is not an actual array, but rather a set of DOM elements. That said, normal array operators won't work on it. If you want to print the text of the first element in the set, rather than this:

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

You should use the jquery .first() method like this:

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

Upvotes: 1

chardy
chardy

Reputation: 1253

Accessing a jQuery result by index will return the actual element itself.

So the error message is saying that there is no text() function on the <a> element (which is true).

So instead, wrap the element back up in jQuery:

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

Upvotes: 1

Related Questions