Question

我正在尝试通过jQuery用" "替换第二个<br>。

我使用了一个包含2个单词的菜单项，但是我需要它来打破某些菜单项的第二个空格。

所以我需要在第二个空格中分割tab1和tab 2，并在第一个空格中分割tab3和tab4

我已经设置了一个小提琴 - http://jsfiddle.net/EpntC/

这是HTML

<ul>
  <li id="tab1"><a href="#">Menu Item One</a></li>
  <li id="tab2"><a href="#" >Menu Item Two</a>
  <li id="tab3"><a href="#" >Menu ItemThree</a>
  <li id="tab4"><a href="#" >Menu ItemFour</a>
</ul>

和jQuery

$(document).ready(function(){
  var tabs = ["tab3","tab4"];
  $.each(tabs, function(index, value){
  var el = $("#"+value).children("a") 
  var html = el.html().split(" ");
  html = html[0] + "<br>" + html.slice(1).join(" ");
  el.html(html);
  });
});
$(document).ready(function(){
  var tabs = ["tab1","tab2"];
  $.each(tabs, function(index, value){
  var el = $("#"+value).children("a") 
  var html = el.html().split(" ");
  html = html[1] + "<br>" + html.slice(2).join(" ");
  el.html(html);
  });
});

Answer 1

您可以拆分空格上的标签并将其包裹在<p>标签中以达到与<br />相同的效果（并且应该谨慎使用恕我直言，<br />，而不是情况）。

$(document).ready(function(){
    $('li a').each(function(){
        var words = $(this).text().split(' ');
        $(this).text('');
        for(word in words){
            var wrapper = $('<p />', {text: words[word]});
            $(this).append(wrapper);
        }
    });
});

演示小提琴：http://jsfiddle.net/m6jeb/

如果您关注单词之间的间距，可以通过css：

设置样式

li a p {
   margin: 0;
   padding: 0;
}

Answer 2

$(function(){
    $('li a').each(function( index ) {
        var aHtml = $(this).html();
        var pos = aHtml.lastIndexOf(' ');
        aHtml = aHtml.substring(0,pos) + '<br/>' + aHtml.substring(pos+1)
        $(this).html(aHtml);
    });
});

的jsfiddle：

http://jsfiddle.net/rtT9t/

Answer 3

我采取了一种稍微不同的方法，但仍然感觉有点hacky，但玩起来很有趣。我可能会找到一种方法使其在某些时候更具可扩展性 - http://jsfiddle.net/jayblanchard/EpntC/2/

$('li a').each(function() {
    var thisText = $(this).text();
    var arrText = thisText.split(" ");
    if(arrText.length == 3) {
        var breakAfter = $(arrText).slice(1);
        var breakAfter = breakAfter[0] + '<br />';
        var newText = arrText[0] + ' ' + breakAfter + arrText[2];

    } else if(arrText.length = 2) {
        var breakAfter = $(arrText).slice(0);
        var breakAfter = breakAfter[0] + '<br />';
        var newText = breakAfter + arrText[1];
    }
    $(this).html(newText);
});

HTML / jQuery用br替换空格

3 个答案:

演示小提琴：http://jsfiddle.net/m6jeb/