jquery - 子值返回未定义

Question

看看我的功能：

$(".select-default").on("click", function() {
    $(".dropdown-menu li a").on("click", function() {
      var x = $(".select-default label").children()[0];
      $(".select-default label").text($(this).text()+x);
    });
  $(this).off("click");
 });

我试图弄清楚为什么 x 打印未定义，我希望它打印实际的子节点：

<span class="caret"></span>

编辑。这是标记：

<ul class="select-default select-sm dropdown-toggle" data-toggle="dropdown">
<label for="select" id="select_value">Select Action <span class="caret"></span></label>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Value 0</a></li>
<li><a href="#">Value 1s</a></li>
<li><a href="#">Value 2</a></li>            
<li><a href="#">Value 3</a></li>

我试图让整个跨度节点嵌套在标签内，并将其与单击的标签的值连接起来。x 应该打印：

<span class="caret"></span>

Answer 1

$(".select-default label").children()[0]将返回undefined，因为从外观上看，label文本节点是子节点。元素的文本节点不会被选中.children()，而是可以$(".select-default label").text()用来获取label元素的文本

$(".select-default").on("click", function() {
    $(".dropdown-menu li a").on("click", function() {
        var a = $($(".select-default label").contents().get(0));
        a.replaceWith($(this).text())
    });
    $(this).off("click");
});

演示：小提琴

Answer 2

这可以工作：

  $(".dropdown-menu li a").on("click", function(e) {
      e.preventDefault();
      var $label = $(".select-default").children("label");
      $label.text($(this).text());          
  });

在这里工作小提琴：http: //jsfiddle.net/uaqHg/2/

Answer 3

答案很简单。

使用追加（x）。代替：

$(".select-default label").text($(this).text()+x);

和：

$(".select-default label").text($(this).text()).append(x);

不管怎么说，还是要谢谢你。