草庐IT

javascript - 关闭并重新打开特定单词周围的标签

coder 2024-07-30 原文

我需要关闭 <span>在单词“hello”之前标记并在单击按钮后立即重新打开它。

这是一个 Fiddle

这是我的代码:

<span class="border"> 
    border Hello border border
</span>
<div> 
    <span class="button">Style me !</span>
</div>

jQuery :

$('.button').click(function () {
    $('.border').each(function () {
        var t = $(this).text();
        var s = t.split('Hello').join('</span>Hello<span class="border">');
        $(this).html(s)
    });
});

单击 .button 后的 HTML 输出是:

<span class="border"> 
    border Hello<span class="border"> border border
</span>

我想要的输出是:

<span class="border"> 
    border </span>Hello<span class="border"> border border
</span>

为什么不是 .join函数插入 </span>结束标记？

最佳答案

您可以像修改字符串一样修改dom结构，但是您必须以父元素为目标，因为您不能插入部分元素

$('.button').click(function () {
    $('.border').each(function () {
        var t = $(this).parent().html();
        var s = t.split('Hello').join('</span>Hello<span class="border">');
        $(this).parent().html(s)
    });
});

FIDDLE

请注意，这适用于示例，但如果父元素也有其他元素，则可能会导致问题，我强烈建议找到另一种方法来获得您正在寻找的结果，而不是关闭和打开元素中间等

编辑:

这是另一种方法，这根本不会影响父级，而且更整洁。
它也使用 outerHTML 来获取周围的标签，这样就不会插入部分元素，但是开始和结束标签都是传递的字符串的一部分

$('.button').click(function () {
    $('.border').each(function () {
        this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">');
    });
});

FIDDLE

或者更简洁的 jQuery 版本

$('.button').click(function () {
    $('.border').prop('outerHTML', function(_, html) {
        return html.split('Hello').join('</span>Hello<span class="border">');
    });
});

FIDDLE

关于javascript - 关闭并重新打开特定单词周围的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22909672/

并重单词bordercodespanjavascriptjquery

有关javascript - 关闭并重新打开特定单词周围的标签的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  3. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

  4. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. Ruby - 如何在读取文件时跳过/忽略特定行？ - 2

    在读取/解析文件(使用Ruby)时忽略某些行的最佳方法是什么？我正在尝试仅解析Cucumber.feature文件中的场景，并希望跳过不以Scenario/Given/When/Then/And/But开头的行。下面的代码有效，但它很荒谬，所以我正在寻找一个聪明的解决方案:)File.open(file).each_linedo|line|line.chomp!nextifline.empty?nextifline.include?"#"nextifline.include?"Feature"nextifline.include?"Inorder"nextifline.include?

  7. ruby - 正则表达式将非英文字母匹配为非单词字符 - 2

    @raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时，条件是错误的。我能用它做什么？ 最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符，我们在StackOverflow上找到一个类似的问题： https://

  8. Python 刷Leetcode题库，顺带学英语单词（31） - 2

    ValidPalindromeGivenastring,determineifitisapalindrome,consideringonlyalphanumericcharactersandignoringcases. [#125]Example:"Aman,aplan,acanal:Panama"isapalindrome."raceacar"isnotapalindrome.Haveyouconsiderthatthestringmightbeempty?Thisisagoodquestiontoaskduringaninterview.Forthepurposeofthisproblem

  9. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  10. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的？ 最佳答案 我刚刚创建了一个名为“t.txt”的文件，其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下，由于第二个参数的默认值是'r'，所以这样

随机推荐