jQuery替换文本,让兄弟姐妹完好无损

KP.*_*KP. 12 html javascript jquery jquery-selectors

我无法绕过应该是一个简单的解决方案.我想替换标签标签中的文本,而不会影响其他"兄弟姐妹"(如果存在).

样本标记:

<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> 
Run Code Online (Sandbox Code Playgroud)

目标:

  • 要替换文本Some Label XSome Label(即删除X从标签文本).
  • 标签内的span标签必须保持不变(如果存在),<span class="marker">如上所述.
  • 我不知道它的值X,可能是1个或更多字符长.

当前脚本:

我的jQuery脚本可以工作,但我知道效率非常低.出于某种原因,我似乎无法绕过这一个......

//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');

    }

});  
Run Code Online (Sandbox Code Playgroud)

我一开始以为我可以做到:

$(".myFieldsetClass label:contains('Some Label ')").text("Some Label");
Run Code Online (Sandbox Code Playgroud)

但是这会清除标签的所有内容,从而消除了我不想要的跨度.我不能使用任何替换功能来代替Some Label X,Some Label因为我不知道X会是什么.

任何人都可以建议更优雅/有效的方法解决这个问题吗?

谢谢.

编辑

尝试多个答案后,我认为问题似乎是即使我选择了正确的集合,它们也是文本节点,jquery似乎不想修改..我已经使用FireBug来选择集合(很多答案)下面所有选择正确但方式略有不同).在firebug控制台中产生的结果是:

[<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:">]
Run Code Online (Sandbox Code Playgroud)

问题似乎是调用.replaceWith(),. renplace(),. text()等似乎不会影响jquery集合.如果我允许上面的集合包含其中一个跨度,那么调用.replaceWith(),. renplace()等对跨度正确运行,但文本节点保持原样.

use*_*716 10

尝试:

$(".myFieldsetClass label:contains('Some Label ')").contents().filter(':last-child').text("Some Label");
Run Code Online (Sandbox Code Playgroud)

假设要替换的文本总是在最后,这应该可行.该contents()函数选择所有节点,包括文本节点.

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

编辑:我应该使用filter()而不是find().纠正.

编辑:现在工作.这是一种方式.

// 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')
Run Code Online (Sandbox Code Playgroud)


Sea*_*ira 7

正如帕特里克指出的那样,您可以contents()单独选择文本,然后对其进行全部替换.调整那里给出的例子,你也可以尝试:

$(".myFieldsetClass label:contains('Some Label ')").contents().filter(function() {
  return this.nodeType == 3 && $(this).is(":contains('Some Label ')");
})
.replaceWith("Some Label");
Run Code Online (Sandbox Code Playgroud)

但是,如果你知道"Some Label"将永远是<label>帕特里克方法中的最后一个元素,我相信会更快.