Question

我有以下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>

我需要收集这部分<span class="all">tst6</span>的所有跨度值我在jsbin上试过这个：

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

但没有任何反应。它上传到这里：

http://jsbin.com/emulah

实时编辑：

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

Answer 1

试试这个：工作演示 http://jsfiddle.net/mHfUs/5/

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

P.S。 jsfiddle表现得很有趣，我准备了演示:)

a介于li和span之间，您可以在上面的演示中看到：＆lt;这将工作＆gt;

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

Answer 2

你的选择器是完全错误的：

">"表示direct child，span不是li的直接孩子，a是。

将其重写为.mainmenu ul li span，或者更好，使用更短的选择器，例如：

$('.mainmenu span.all')

或

$('.blue span')

Answer 3

您的span元素没有值（val()）。

尝试获取text()：

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

Answer 4

您可以使用.map来获得结果。（span没有值，你应该使用.text()来获取innerHtml文本）

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

Answer 5

1-您的span元素不是li元素的直接后代，因此选择器

(".mainmenu ul li > span")

将不匹配任何元素。写而不是$(".mainmenu li span")

2-而不是val()方法使用text()方法

Answer 6

以下是使用jquery选择正确选择器并在其上应用适当属性的解决方案。

$(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")

}）;

我使用http://codebins.com/codes/home/4ldqpcb

上的解决方案创建了一个bin

正确获取jquery选择器

6 个答案: