的JQuery的.text（）被刪除我的輸入標籤完全複選框

Question

我不認爲我可以解釋這個詞不太好，所以我做了你們一個小提琴：

JSFiddle

$(document).ready(function() { 
 
\t $("#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> 
 
\t <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>添加<span>爲文本內容，並使用.text()：

$(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() { 
 
\t $("#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> 
 
\t <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

如果有人需要，不涉及更改標記的答案，你可以使用：

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

<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>

Answer 7

爲了確保它不因爲jQuery的.text（）「設置的每個元素的內容在與指定文本匹配的元素集合中。「 （http://api.jquery.com/text/#text2）

解決你的問題你可以用你想要在你的標籤例如爲：<span>Label 1</span>https://jsfiddle.net/9m4bgyq8/2/