Question

我试图将span包装到文章中的每个单词。（jquery1.10.1.js）我认为split - ＆gt; each loop - ＆gt; replace，但文章中没有任何变化，问题出在哪里？感谢。

var words=$("#my-div").text().split(' ');
$.each(words,function(i,val){
  val.replace(val,val.wrap('<span class="my-span"></span>')+' ');
});
<div id="my-div">
<h2><span class="mw-headline" id="History">History</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Ruby_on_Rails&amp;action=edit&amp;section=1" title="Edit section: History">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
<p><a href="/wiki/David_Heinemeier_Hansson" title="David Heinemeier Hansson">David Heinemeier Hansson</a> extracted Ruby on Rails from his work on <a href="/wiki/Basecamp_Classic" title="Basecamp Classic">Basecamp</a>, a project management tool by <a href="/wiki/37signals" title="37signals">37signals</a> (now a <a href="/wiki/Web_application" title="Web application">web application</a> company).<sup id="cite_ref-interview-davidhh_3-0" class="reference"><a href="#cite_note-interview-davidhh-3"><span>[</span>3<span>]</span></a></sup> Hansson first released Rails as open source in July 2004, but did not share <a href="/wiki/Commit_(data_management)" title="Commit (data management)">commit</a> rights to the project until February 2005.<sup id="cite_ref-core_4-0" class="reference"><a href="#cite_note-core-4"><span>[</span>4<span>]</span></a></sup> In August 2006, the framework reached a milestone when <a href="/wiki/Apple_Inc." title="Apple Inc.">Apple</a> announced that it would ship Ruby on Rails with <a href="/wiki/Mac_OS_X_Leopard" title="Mac OS X Leopard">Mac OS X v10.5 "Leopard"</a>,<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span>[</span>5<span>]</span></a></sup> which was released in October 2007.</p>
<p>Rails version 2.3 was released on March 15, 2009 with major new developments in templates, engines, <a href="/wiki/Rack_(web_server_interface)" title="Rack (web server interface)">Rack</a> and nested model forms. Templates enable the developer to generate a skeleton application with custom <a href="/wiki/RubyGems" title="RubyGems">gems</a> and configurations. Engines give developers the ability to reuse application pieces complete with routes, view paths and models. The Rack web server interface and Metal allow one to write optimized pieces of code that route around ActionController.<sup id="cite_ref-Rails_2.3:_Templates.2C_Engines.2C_Rack.2C_Metal.2C_much_more.21_6-0" class="reference"><a href="#cite_note-Rails_2.3:_Templates.2C_Engines.2C_Rack.2C_Metal.2C_much_more.21-6"><span>[</span>6<span>]</span></a></sup></p>
<p>On December 23, 2008, <a href="/wiki/Merb" title="Merb">Merb</a>, another web application framework, was launched, and Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities.<sup id="cite_ref-The_day_Merb_joined_Rails_7-0" class="reference"><a href="#cite_note-The_day_Merb_joined_Rails-7"><span>[</span>7<span>]</span></a></sup> Merb was merged with Rails as part of the Rails 3.0 release.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span>[</span>8<span>]</span></a></sup><sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span>[</span>9<span>]</span></a></sup></p>
</div>

Answer 1

这种方法对我有用：

var words=$("#my-div").text().split(' ');
for(var i = 0; i < words.length; i++)
{
    words[i] = "<span>"+words[i]+"</span>";
}
var newHTML = words.join(" ");
$("#my-div").html(newHTML);

在用HTML环绕之前，您必须将此方法应用于文本。否则，你应该只使用jQuery来选择已经围绕单词的HTML元素，并将CSS应用于它们，而不是将它们包装在一个范围内。

http://jsfiddle.net/x3LeB/

Answer 2

您可以这样做：

http://jsfiddle.net/ZukAT/2/

$(document).ready(function(){
    var words = $("#my-div").text().split(' ');
    var html = $("#my-div").html();

    $.each(words,function(i,val){
        html = html.replace(val,'<span class="my-span">'+val+'</span> ');
    });

    $("#my-div").html(html)
});

B-u-t如果文字中的“class”这样的单词，它也会替换HTML：\

你究竟想做什么？你需要吗？

jquery wrap包含文章中的每个单词

2 个答案: