Question

我认为我不能用言语来解释这一点，所以我为你们做了一个小提琴：

$(document).ready(function () {
	$("#clickMe").click(function(){
    $("#label1").text("test1234");
    $("#label2").text("test1234");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li>
    <label id="label1">
      <input type="checkbox"/>
       Label 1
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id = "label2" for="checkbox_id">
      Label 2
    </label>
  </li>
</ul>

<button id="clickMe">
Click me
</button>

如您所见，我准备了一个由标签包围的输入复选框，以及一个通过for="..."功能分配标签的输入复选框。

我现在尝试更改两者上的标签文本。但是，周围的标签完全丢失了它周围的<input>标签。它完全消失了。

另一个完美无缺。

但是，我想让它以第一种方式运作。是否有可能实现这一目标？

Answer 1

安全且最好的方法是替换您的HTML，为文字内容添加<span>，并使用.text()上的<span>：

$(document).ready(function () {
  $("#clickMe").click(function(){
    $("#label1 span").text("test1234");
    $("#label2 span").text("test1234");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label id="label1">
      <input type="checkbox"/>
      <span>Label 1</span>
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id = "label2" for="checkbox_id">
      <span>Label 2</span>
    </label>
  </li>
</ul>

<button id="clickMe">
  Click me
</button>

Answer 2

这就是你要找的东西：

$(document).ready(function () {
    $("#clickMe").click(function(){
    var childElement = $('#label1').find('input:checkbox');

    $("#label1").append(childElement).before(childElement).text('123');
    $("#label2").text("test1234");
  })
});

或者试试你的（更新的）小提琴：

- ~~https://jsfiddle.net/9m4bgyq8/4/~~

修改

这个更好：

$(document).ready(function () { $("#clickMe").click(function(){ var childElement = $('#label1').find('input:checkbox'); $("#label1").html(childElement); $('#label1').append(' test1234'); $("#label2").text("test1234"); }); });

- https://jsfiddle.net/9m4bgyq8/12/

Answer 3

第一个输入外面有标签标签 - 一旦你切换它就应该有效。

      <input type="checkbox"/>
  <label id="label1">
   Label 1
</label>

$(document).ready(function () {
	$("#clickMe").click(function(){
    $("#label1").text("test1234");
    $("#label2").text("test1234");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li>
      <input type="checkbox"/>
      <label id="label1">
       Label 1
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id = "label2" for="checkbox_id">
      Label 2
    </label>
  </li>
</ul>

<button id="clickMe">
Click me
</button>

Answer 4

你可以尝试使用像这样操作的原生DOM：

$(document).ready(function () {
  $("#clickMe").click(function(){
    $('#label1')[0].childNodes[2].nodeValue='123213';
  });
});

Demo

Answer 5

jQuery.text()用提供的文本替换DOM节点的内容。这就像清空元素，然后将文本写入其中，因此也会删除非文本子节点。

你可以检查每个childNode，检查它是否是一个文本节点，并用新文本替换它 - 但是有一个问题，因为可能有多个文本节点（空格也很重要！）。所以我创建了一个删除所有文本节点的函数，并用新文本替换最后一个：

demo

jQuery.fn.replaceText = function( newText ){
    this.each( function(element){
    [].slice.call(this.childNodes).forEach(function(node,i, nodes){
      if( node.nodeType == 3){
        if( i == nodes.length -1 ){  // last text node: change the text
            node.nodeValue = newText;
        }
        else { // any other text node: remove it
            node.parentNode.removeChild( node );
        }
      }
    });
  });
}

Answer 6

如果有人需要一个不涉及更改标记的答案，您可以使用：

＆＃13;

  $("#clickMe").click(function() {
    $("#label1").html($.trim($("#label1").html())).contents().filter(function(e) {
      if (this.nodeType === 3) this.nodeValue = ' test1234'
    });
    $("#label2").text("test1234");
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label id="label1">
      <input type="checkbox" /> Label 1
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id="label2" for="checkbox_id">
      Label 2
    </label>
  </li>
</ul>

<button id="clickMe">
  Click me
</button>

＆＃13;

Answer 7

确实这样做是因为jQuery .text（）“将匹配元素集中每个元素的内容设置为指定的文本。” （http://api.jquery.com/text/#text2）

要解决您的问题，您可以在标签中包含您要更改的文字，例如：<span>Label 1</span> https://jsfiddle.net/9m4bgyq8/2/

JQuery .text（）完全删除了我的输入标签复选框

7 个答案: