正确获取 jquery 选择器答案

【问题标题】：Getting the jquery selector right正确获取 jquery 选择器
【发布时间】：2012-07-02 10:44:56
【问题描述】：

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

【问题讨论】：

你想收集哪个值？

标签： jquery

【解决方案1】：

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

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

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

a 介于 li 和 span 之间，如您在上面的演示中所见：

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

【讨论】：

@GandalfStormCrow 嘿，伙计，您的li 和span 之间似乎有a 标签，这使得选择器错误，我第一次使用jsbin，因此需要时间，:)
@GandalfStormCrow 在这里工作演示：jsfiddle.net/mHfUs/5 希望这会有所帮助

【解决方案2】：

你的选择器完全错误：

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

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

$('.mainmenu span.all')

或

$('.blue span')

【讨论】：

【解决方案3】：

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

尝试获取text()：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

1- 你的 span 元素不是 li 元素的直接后代，所以选择器

(".mainmenu ul li > span")

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

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

【讨论】：

【解决方案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上创建了一个带有解决方案的垃圾箱

【讨论】：