jQuery替换文本，使兄弟姐妹完好无损 [英] jQuery replace text leaving siblings intact

问题描述

我无法解决这个简单的解决方案。我希望替换标签中的文字，而不会影响其他的兄弟姐妹，如果它们存在的话。

示例标记：

 < fieldset class =myFieldsetClass> 
< legend> Sample Fieldset< / legend> 
< ol> 
< li> 
< label> 
< span class =marker> *< / span> 
一些标签1 
< / label> 
< / li> 
< li> 
< label> 
一些标签2 
< / label> 
< / li> 
< li> 
< label> 
不匹配的文本... 
< / label> 
< / li> 
< / ol> 
< / fieldset> 
  

目标：

• 用一些标签替换文本一些标签X （Ie remove <$标签文本中的c $ c> X ）。标签内的
  
• span标签必须保持完整，如< ; span class =marker> 以上。


• 我不知道 X 的值，该值可能为1个或更多字符。

当前脚本：

我的jQuery脚本的作品，但我知道的是非常低效。由于某种原因，我似乎无法将自己的头围绕在这个...

  // //为字段集中的每个标签包含文本一些标签
 $（。myFieldsetClass label：contains（'Some Label'））。each（function（）{
 
 if（$（this）.has （span）。length> 0）{
 
 //如果标签中有span标签，则将其删除并将其前置回替换后的文本
 $（this）。 find（span）。remove（）。prependTo（$（this）.text（labelText））; 
 
} 
 else {
 
 // // // （'Some Label'）; 
 
} 
 
}）; 
  

我一开始以为我可以简单地做：

  $（。myFieldsetClass label：contains（'Some Label'））。text（Some Label）; 
  

但是这会清除标签中的所有内容，从而删除我不想要的范围。我不能用任何替换函数来替换 Some Label X 和 Some Label ，因为我不知道 X 即可。

任何人都可以提出一个更优雅/更高效的方法来解决这个问题吗？
$ b

谢谢。

编辑

After尝试多个答案，我认为这个问题似乎是，即使我选择正确的集合，他们是文本节点，jquery似乎并不想修改..我用FireBug来选择集合（下面的许多答案所有选择正确，但方式稍有不同）。在萤火虫控制台中，结果集为：

  [< TextNode textContent =某标签1：>，
 < TextNode textContent =一些标签2：> ;, 
< TextNode textContent =一些标签3：>，
< TextNode textContent =一些标签4：> ;, 
< TextNode textContent =某标签5：>] 
  

要调用.replaceWith（），.replace（），.text（）等似乎不会影响jquery集合。如果我允许上面的集合包含其中一个跨度，那么调用.replaceWith（），.replace（）等功能可以正确地对跨度进行操作，但文本节点保持原样。

<解决方案

试试：

  $（。myFieldsetClass label：contains （'Some Label'））。contents（）。filter（'：last-child'）.text（Some Label）; 
  

这应该是假设要替换的文本总是在最后。 contents（）函数选择包括文本节点在内的所有节点。

http://api.jquery.com/contents/

编辑：我应该已经使用filter（）而不是find（）。更正。

编辑：现在可以使用。

  //将适当的标签存储在变量中以便快速准确地引用
 var $ labelCollection = $ （.myFieldsetClass label：contains（'Some Label'））; 
 
 //调用contents（），获取最后一个并移除（）它
 $ labelCollection.each（function（）{
 $（this）.contents（）。 last（）。remove（）
}）; 
 
 //然后简单地追加（）到标签上，无论你想要什么文字。 
 $ labelCollection.append（'some text'）
  

I'm having trouble wrapping my head around what should be a simple solution. I want to replace text within a label tag, without affecting the other 'siblings', if they exist.

Sample markup:

<fieldset class="myFieldsetClass">
    <legend>Sample Fieldset</legend>
    <ol>
        <li>
            <label>
                <span class="marker">*</span>
                Some Label 1
            </label>
        </li>
        <li>
            <label>
                Some Label 2
            </label>
        </li>
        <li>
            <label>
                Text that doesn't match...
            </label>
        </li>
    </ol>
</fieldset> 

Goal:

• To replace text Some Label X with Some Label (I.e. remove X from the label text).
• span tags within label must stay intact if they exist, such as the <span class="marker"> above.
• I do not know the value of X, which could be 1 or more characters long.

Current Script:

My jQuery script below works, but I know is very inefficient. I can't seem to wrap my head around this one for some reason...

//for each label in the fieldset that contains text "Some Label "
$(".myFieldsetClass label:contains('Some Label ')").each(function() {

    if ($(this).has("span").length > 0) {

        //if the label has the span tag within, remove it and prepend it back to the replaced text
        $(this).find("span").remove().prependTo($(this).text(labelText));

    }
    else {

        //otherwise just replace the text
        $(this).text('Some Label');

    }

});  

I thought at first I could simply do:

$(".myFieldsetClass label:contains('Some Label ')").text("Some Label");

But this clears all contents of the label and hence removes the span, which I don't want. I can't use any replace functions to replace Some Label X with Some Label because I don't know what X will be.

Can anyone suggest a more elegant/efficient approach to this problem?

Thanks.

EDIT

After trying multiple answers, I think the problem seems to be that even if I select the right collection, they are text nodes, which jquery doesn't seem to want to modify.. I've used FireBug to select the collection (many answers below all select correctly but in slightly different ways). In firebug console resulting set is:

[<TextNode textContent="Some Label 1:">,
 <TextNode textContent="Some Label 2:">, 
 <TextNode textContent="Some Label 3:">, 
 <TextNode textContent="Some Label 4:">, 
 <TextNode textContent="Some Label 5:">]

The problem seems to be that calling .replaceWith(), .replace(), .text(), etc. doesn't seem to affect the jquery collection. If I allow the above collection to contain one of the spans, then calling .replaceWith(), .replace(), etc functions correctly against the span, but the text nodes stay as is..

解决方案

Try:

$(".myFieldsetClass label:contains('Some Label ')").contents().filter(':last-child').text("Some Label");

This should work assuming the text to be replaced will always be at the end. The contents() function selects all nodes, including text nodes.

http://api.jquery.com/contents/

EDIT: I should have used filter() instead of find(). Corrected.

EDIT: Works now. Here's one way.

// Store proper labels in a variable for quick and accurate reference
var $labelCollection = $(".myFieldsetClass label:contains('Some Label ')");

// Call contents(), grab the last one and remove() it
$labelCollection.each(function() {
    $(this).contents().last().remove()
});

// Then simply append() to the label whatever text you wanted.
$labelCollection.append('some text')

这篇关于jQuery替换文本，使兄弟姐妹完好无损的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！