Question

我正在使用一个相当旧的网站并使其响应。开发人员设置如下所示的“nav”，没有列表或任何内容。移动导航将是垂直的，我不想要“|”字符。我想这样做而不触摸导航HTML或添加第二个菜单以在较小的屏幕上显示。

<div id="mainNav">
  <a href="/home">Home</a>|
  <a href="/about">About</a>|
  <a href="/areas-of-practice">Areas of Practice</a>|
  <a href="/in-the-news">In the News</a>|
  <a href="/contact">Contact</a>
</div>

我已经尝试过这行jQuery，但它似乎删除了标签以及“|”，留下了一串“HomeAboutAreas of PracticeIn the NewsContact”。我怎么只删除“|”并保留其他所有内容？

$('#mainNav').text(function(index,text){
  return text.replace(/[|]/g,'');
});

Answer 1

使用.html代替.text，以便保留HTML。

当您只是替换一个字符时，还没有必要在正则表达式中使用[]。但是，您需要在字符集外转义管道字符，因为它意味着交替。

＆＃13;

$("#doit").click(function() {
  $('#mainNav').html(function(index, text) {
    return text.replace(/\|/g, '');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainNav">
  <a href="/home">Home</a>|
  <a href="/about">About</a>|
  <a href="/areas-of-practice">Areas of Practice</a>|
  <a href="/in-the-news">In the News</a>|
  <a href="/contact">Contact</a>
</div>
<button id="doit">Remove pipes</button>

＆＃13;

Answer 2

可以通过将父字体大小设置为零并将子字体大小设置为默认值

来单独使用css

#mainNav { font-size:0; }
#mainNav a { font-size:14px; }

的 DEMO

对于不替换元素（以及可能绑定到它们的事件）的javascript解决方案，您可以使用以下命令删除文本节点：

$('#mainNav').contents().filter(function(){ return this.nodeType === 3; }).remove();

的 DEMO 2

Answer 3

放入管道＆＃39;单独的<span> elemenet中的字符，然后使用CSS media queries

隐藏它们

<强> HTML：

<a href="/areas-of-practice">Areas of Practice <span>|</span></a>

<强> CSS

@media (max-width: 320px) {
  .mainNav a span {
    display: none;
  }
}

或您可以向border-right:1px solid black元素提供a，然后使用媒体查询将其恢复为0px; - 这完全抛弃了字符并使用纯CSS来实现您的预期结果

＆＃13;

#mainNav a{
  padding:2px;
  border-right:1px solid black;
}



@media (max-width: 600px) {
  #mainNav a{
    border-right:0px solid black;
  }
}

＆＃13;

<div id="mainNav">
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/areas-of-practice">Areas of Practice</a>
  <a href="/in-the-news">In the News</a>
  <a href="/contact">Contact</a
</div>

＆＃13;

Answer 4

演示：https://jsfiddle.net/erkaner/6mtafkek/1/

您只能检索链接并将它们追加到div：

 var links = $('#mainNav a');

 $('#mainNav').html('').append(links );


 a{
     margin-right:5px;
 }

Answer 5

试试这个：

＆＃13;

$('#mainNav').html(function(index,text){
  return text.replace(/[|]/g,'');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainNav">
  <a href="/home">Home</a>|
  <a href="/about">About</a>|
  <a href="/areas-of-practice">Areas of Practice</a>|
  <a href="/in-the-news">In the News</a>|
  <a href="/contact">Contact</a>
</div>

＆＃13;

替换Div中的所有管道字符

5 个答案: