JQuery .text() for element in array

Question

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?

Cameron637 · Accepted Answer · 2016-07-26 20:32:05Z

1

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

answered Jul 26, 2016 at 20:32

Cameron637

1,71914 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bajro Over a year ago

ahh I see...I didn't knew it's a Set, but that clarify's my whole question on this topic. So it would also be possible to just convert the set to an array but I suppose to just address the anchorTag directly and parse the text

Cameron637 Over a year ago

Yeah, if you'd like you can change it into a true array by using jquery's .toArray() method, but then you won't be able to perform jquery operations on them anymore unless you rewrap them in jquery.

chardy · Accepted Answer · 2016-07-26 20:31:51Z

1

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

answered Jul 26, 2016 at 20:31

chardy

1,2531 gold badge10 silver badges19 bronze badges

Comments

Hodrobond · Accepted Answer · 2016-07-26 20:34:01Z

1

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/

answered Jul 26, 2016 at 20:34

Hodrobond

1,69417 silver badges18 bronze badges

2 Comments

bajro Over a year ago

ok...so instead of making a for loop which would try to the same as I posted above, it is better to use the ".each()" function for the desired CSS Selector?

Hodrobond Over a year ago

I believe it's syntactically easier to read and more accurately represents the logic you're trying to represent. This is one way to iterate throughout the collection of anchors that have said class. Your question was "I want to find elements that are an anchor with a class", which I took literally =) $('a.anchorTag') will return an array containing all anchor elements with the class "anchorTag"

Nirmi · Accepted Answer · 2016-07-26 20:56:58Z

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?

Collectives™ on Stack Overflow

JQuery .text() for element in array

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related