CODEWITHSUNDEEP
jquery
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26212

Getting the jquery selector right

I have the following html :

<div class="mainmenu">
    <ul class="blue">
                <li class=""><a href="tst/" id="a1_up"><span class="all">tst1</span></a></li>
              <li class=""><a href="tst1/" id="a2_up"><span class="all">tst2</span></a></li>
              <li class=""><a href="tst3/" id="a3_up"><span class="all">tst3</span></a></li>
              <li class=""><a href="tst4/" id="a4_up"><span class="all">tst3</span></a></li>
              <li class=""><a href="tst5/" id="a5_up"><span class="all">tst4</span></a></li>
              <li class=""><a href="tst6/" id="a6_up"><span class="all">tst5</span></a></li>
              <li class=""><a href="tst7/" id="a7_up"><span class="all">tst6</span></a></li>
          </ul>
  </div>

I need to collect all span values this part <span class="all">tst6</span> I've tried this on jsbin:

$(document).ready(function() {
  $(".mainmenu ul li > span").each(function() {
    alert($(this).val());
    });
 });

But nothing happens. It's uploaded here :

http://jsbin.com/emulah

Live edit :

http://jsbin.com/emulah/edit#javascript,html,live

Upvotes: 2

Views: 86

Answers (6)

gaurang171
gaurang171

Reputation: 9090

Following is a solution to select right selector using jquery and apply proper properties on it.

$(document).ready(function() {
var result = '';
$(".mainmenu ul li span.all").each(function() {
    result += '<div><a href="#">' + $(this).text() + '</a></div>';
});
$('#result').html(result);
$("#result").addClass("output")

});

I have created a bin with the solution on http://codebins.com/codes/home/4ldqpcb

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34117

try this: Working demo http://jsfiddle.net/mHfUs/5/

$(document).ready(function() {
    $(".mainmenu > ul > li > span").each(function() {
        alert($(this).text());
    });
});​

p.s. jsfiddle is acting funny else I had demo ready :)

a is between li and span as you can see in demo above: < this will work >

$(document).ready(function() {
    alert('f');
    $("div.mainmenu ul li a span").each(function() {
        alert($(this).text());
    });
});​

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

1- your span elements are not direct descendents of li elements, so the selector

(".mainmenu ul li > span")

won't match any element. write instead $(".mainmenu li span")

2- Instead of val() method use text() method

Upvotes: 0

German Rumm
German Rumm

Reputation: 5832

Your selector is totally wrong:

">" means direct child, and span is not a direct child of li, a is.

Either rewrite it as .mainmenu ul li span, or, better, use even shorter selector, like: 

$('.mainmenu span.all')

or

$('.blue span')

Upvotes: 2

xdazz
xdazz

Reputation: 160963

You could use .map to get the result. (span don't have value, you should use .text() to get the innerHtml text)

var values = $(".mainmenu ul li > span").map(function() {
  return $(this).text();
});

Upvotes: 0

antyrat
antyrat

Reputation: 27765

Your span elements doesn't have value (val()).

Try to get text() instead:

alert($(this).text());

Upvotes: 1

Related Questions