Question

我有这个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>

我有动态更改文本的功能

$("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元素中的文本

Answer 1

使用.text()代替.html()

修改

$(".criteria > li").contents().filter(function(){return this.nodeType == 3}).first().replaceWith(newText);

Answer 2

您应该将文本包装在自己的元素中，就像span一样。然后你可以这样定位：

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

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

的实例

Answer 3

将li中的名称包含在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的名称。

Answer 4

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

试试此代码

$("ul.criteria > li").contents().filter(function() {
      return (this.nodeType != 1 && this.textContent != '\n')
}).replaceWith('Older Text replaced...');

使用.contents()获取li中的所有内容。
然后过滤并仅选择没有托架的文本节点返回..
然后用新文字替换

<强> CHECK FIDDLE

Answer 5

我更喜欢安迪的答案，因为它还允许你进一步操纵那个范围。

因此，您的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必须为unique within the HTML document和looking up by ID is the fastest jQuery selector，因此无需按元素类型和 ID进行选择。 “.live() method is deprecated,”;我们建议使用.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');
    }
});

See my fiddle for a working example

只更改包含img的li中的文本

5 个答案: