0

我有这个 html 代码

<ul class="criteria">
<li id="1">
criteria 1
<img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
<img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
</li>
<li id="2">
criteria 2
<img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
<img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
</li>
</ul>

我具有动态更改 li 文本的功能

$("input#criterion_name").live("keyup",function(e){
    var newText =  $("input#criterion_name").val();
    if(newText){
    $("ul.criteria > li.selected").html(newText);
    }
    else{
    // can't leave the text filed empty 
    $("#criterion_name").addClass("error"); 
}

问题是当我在输入文本中键入文本时，删除了 li 元素中的图像。我只想更改 li 元素中的文本

4

5 回答 5

4

使用.text()而不是.html()

编辑

$(".criteria > li").contents().filter(function(){return this.nodeType == 3}).first().replaceWith(newText);
于 2012-10-12T16:36:13.813 回答
2

您应该将文本包装在其自己的元素中，例如span. 然后你可以这样定位：

$("ul.criteria > li.selected > span.thetext").html(newText);

此外，id 属性不应只是数字，并且不应在文档中多次使用，即它应该是唯一的。您有几个实例id="1"

于 2012-10-12T16:36:40.777 回答
0

将名称包含li在 a 中span（或您认为有效的任何元素）。然后更改span.

小提琴：http: //jsfiddle.net/LLPya/1/

HTML：

<input type="text" id="criterion_name" />

<ul class="criteria">
    <li id="1">
        <span class="criteria_name">criteria 1</span>
        <img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
        <img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
    </li>
    <li id="2">
        <span class="criteria_name">criteria 2</span>
        <img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
        <img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
    </li>
</ul>​

jQuery：

$('#criterion_name').keyup(function() {
    var newText = $(this).val();
    if (newText) {
        $('#1 span.criteria_name').html(newText);
    }
});​

根据您的选择器，您的 HTML 并不完整，所以我只是添加了一个文本框并正在更改第一个li.

于 2012-10-12T16:42:00.980 回答
0

您可以使用nodeType属性仅选择文本并替换它。无需将其值包含在跨度中。

试试这个代码

$("ul.criteria > li").contents().filter(function() {
      return (this.nodeType != 1 && this.textContent != '\n')
}).replaceWith('Older Text replaced...');
​
  • 使用.contents()获取 li 中的所有内容。
  • 然后过滤并仅选择没有回车的文本节点..
  • 然后用新文本替换

检查小提琴

于 2012-10-12T16:59:24.610 回答
0

我更喜欢安迪的回答，因为它还允许您进一步操纵该跨度。

所以你的 HTML 代码会变成：

<ul class="criteria">
  <li id="1">
    <span class="label_text">criteria 1</span> <!-- wrap in span.label_text -->
    <img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
    <img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
  </li>
  <li id="2">
    <span class="label_text">criteria 2</span> <!-- wrap in span.label_text -->
    <img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
   <img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
  </li>
</ul>

由于元素 ID 在 HTML 文档中必须是唯一的，并且按 ID 查找是最快的 jQuery 选择器，因此无需按元素类型和ID 进行选择。" .live() 方法已弃用， "; 建议我们改用 .on() 方法。因此，当我们添加 Andy 的解决方案时，您的 jQuery 将变为：

$('#criterion_name').on('keyup', function() {
    var newText =  $(this).val();
    if(newText.length){
      $('ul.criteria > li > span.label_text').html(newText);
    }
    else{
      // can't leave the text filed empty 
      $('#criterion_name').addClass('error');
    }
});​

请参阅我的小提琴以获取工作示例。

于 2012-10-12T17:14:48.060 回答