CODEWITHSUNDEEP
jqueryhtml
bentley5
bentley5

Reputation: 83

Loop through a href tags in a li ul starting from a div using Jquery

How do I loop through every a href element and then get the text from the href starting from div Foo.

Basically I want to loop through values Hello, World, Acc, Sale, etc.

<div id="Foo">
   <div class="Moo">
      <ul>
         <li>
            <a href="http://www.test.com/b5">Hello</a>
         </li>
         <li>
            <a href="http://www.test.com/b6">World</a>
         </li>
         <li>
            <a href="http://www.test.com/b7">Acc</a>
         </li>
         <li>
            <a href="http://www.test.com/b8">Sale</a>
         </li>
      </ul>
   </div>
</div>

AAAAH WHAT THE HELL THIS LANGUAGE IS DRIVING ME NUTS. How come this doesn't work? I'm basically pointing at the objects and saying loop through every A.

$('#Foo').find('.Moo ul li').find('a').each(function(){
   alert($(this).text);
});

This doesn't work either.

$('#Foo.Moo ul li a').each(function(){
   alert($(this).text);
});

nor this, they just keep returning javascript instead of the value of the a tag.

('#Foo .Moo ul li a').each(function(){  
   alert($(this).text);
});

Upvotes: 1

Views: 6422

Answers (3)

krishwader
krishwader

Reputation: 11381

You HTML is invalid, so this doesnt work. Remove the unwanted <ul> in the middle:

<div id="Foo">
    <div class="Moo">
        <ul>
            <li>
<a href="http://www.test.com/b5">Hello</a>

            </li>
            <li>
<a href="http://www.test.com/b6">World</a>

            </li>
            <li>
<a href="http://www.test.com/b7">Acc</a>

            </li>
            <li>
<a href="http://www.test.com/b8">Sale</a>

            </li>
        </ul>
    </div>
</div>

You could then use map() to iterate over the <a> and get the text, the store it in an array. 

var aText = $("#Foo a").map(function () {
    return this.innerHTML;
}).get();
alert(JSON.stringify(aText)); //not needed. You could access that text like this : aText[i] where i = 0|1|2

Demo : http://jsfiddle.net/hungerpain/WG2Hg/

Upvotes: 0

Royi Namir
Royi Namir

Reputation: 148694

Your html is not valid

<div id="Foo">
    <div class="Moo">
        <ul>
            <li>
            <a href="http://www.test.com/b5">Hello</a>
            <ul>
                </li>
                <li>
                <a href="http://www.test.com/b6">World</a>
                <ul>
                    </li>
                    <li>
                    <a href="http://www.test.com/b7">Acc</a>
                    </li>
                    <li>
                    <a href="http://www.test.com/b8">Sale</a>
                    </li>
                </ul>
            </div>
        </div>

this might be the cause.

fix it and then re-ask.

then you can do this : 

$('#Foo .Moo ul li a').each(function(){
   alert($(this).text());
});

Upvotes: 1

GautamD31
GautamD31

Reputation: 28753

Try like

$("#Foo .Moo ul li a").each(function(){
     alert($(this).text());
});

from your code it may like

$('#Foo').find('.Moo ul li').find('a').each(function(){
   alert($(this).text());
});

It would be like .text() not like .text And proper your html like

<div id="Foo">
<div class="Moo">
    <ul>
        <li>
        <a href="http://www.test.com/b5">Hello</a>
        <ul>                
            <li>
            <a href="http://www.test.com/b6">World</a>
            </li>
            <ul>
                <li>
                <a href="http://www.test.com/b7">Acc</a>
                </li>
                <li>
                <a href="http://www.test.com/b8">Sale</a>
                </li>
            </ul>
           </ul>
           </li>
         </ul>
        </div>
    </div>

Upvotes: 3

Related Questions