Замените все персонажи труб в Div

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 из PracticeIn в NewsContact». Как мне удалить только «|» и оставить все остальное как есть?

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

Answer 1

Использование .html вместо .text так вы держите HTML.

В регулярном выражении также нет необходимости использовать [], когда вы просто заменяете один символ. Однако вам нужно избежать символа трубы вне набора символов, поскольку это означает чередование.

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

<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>

Answer 2

Поместите символы 'трубы' в отдельном <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 для достижения вашего предполагаемого результата

#mainNav a{ 
 
    padding:2px; 
 
    border-right:1px solid black; 
 
} 
 

 

 

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

<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>

Answer 3

Демо: https://jsfiddle.net/erkaner/6mtafkek/1/

Вы можете получить только ссылки и добавлять их обратно в DIV:

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

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


a{ 
    margin-right:5px; 
} 

Answer 4

Попробуйте это:

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

<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>

Answer 5

Можно сделать это с помощью CSS в одиночку, установив родительский размер шрифта до нуля и настройки размера детей шрифта для любого используемого по умолчанию является

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

DEMO

И для решения javascript, которое не заменяет элементы (и, возможно, связанные с ними события), вы можете удалить текстовые узлы, используя:

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

DEMO 2