2

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

4

6 回答 6

2

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

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

ps jsfiddle 表现得很有趣，否则我已经准备好了演示:)

a介于两者之间li，span正如您在上面的演示中所见：< 这将起作用 >

$(document).ready(function() {
    alert('f');
    $("div.mainmenu ul li a span").each(function() {
        alert($(this).text());
    });
});​
于 2012-07-02T10:46:36.947 回答
2

您的选择器完全错误：

">"表示direct child, 并且span不是 , is 的直接li子代a。

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

$('.mainmenu span.all')

或者

$('.blue span')
于 2012-07-02T10:52:48.640 回答
1

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

尝试text()改为：

alert($(this).text());
于 2012-07-02T10:46:15.727 回答
0

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

var values = $(".mainmenu ul li > span").map(function() {
  return $(this).text();
});
于 2012-07-02T10:52:41.523 回答
0

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

(".mainmenu ul li > span")

不会匹配任何元素。改写$(".mainmenu li span")

2-代替val()方法使用text()方法

于 2012-07-02T10:55:19.297 回答
0

以下是使用 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

于 2012-07-02T11:24:08.220 回答