Question

我们有一些动态生成的页面，在其中一些页面中，作者有复制和粘贴的元素。

标记可能类似于：

<p>Duties include:
<br>
<br>
<br>
<br>
 •  Assisting residents with dressing, undressing, bathing and personal care
<br>
<br>
<br>
<br>
<br>
 •  Helping residents with mobility problems and disabilities 
<br>
<br>
<br>
<br>
 •  To care for residents who are unwell i.e. changing dressings and bed nursing
<br>
</p>

我想做的是在特定组中选择其中两个并隐藏他们的兄弟姐妹。我无法隐藏所有这些，因为它们仍然用于在段落中创建换行符。

要清楚，我需要在特定组中保留2个br，所以在上面示例中的每段文本之间。

我尝试过使用带有CSS的nth-child但是br的数量是未知的，可能很多或很少。

任何帮助都会很棒。

干杯

Answer 1

如果您无法修改HTML，则必须使用javascript。幸运的是，在这种情况下很容易：

$('p').contents().filter(function() {
    return this.nodeType === 3 && $.trim(this.nodeValue);
}).wrap('<span>');

然后将它与一些CSS结合使用来驯服重复br标记：

br + br {
    display: none;
}

_{*或br + br + br取决于您要隐藏的br个数。}

演示：http://jsfiddle.net/ff7sb59n/1/

Answer 2

这是一个可以构建的jQuery解决方案。

它包含跨度中不是空格的所有文本节点，在跨度之间查找额外的br并删除它们，然后用它的文本内容替换临时跨度

$('p').contents().each(function(){
    if(this.nodeType === 3 && $.trim(this.nodeValue).length){
       $(this).wrap('<span class="temp_span">')
    }

});

$('p .temp_span').each(function(){
   var $br = $(this).nextUntil('.temp_span');    
    $br.filter('br:gt(1)').remove()    
}).replaceWith(function(){
    return $(this).text()
});

这样您就可以在存储数据之前删除多余的中断。

的 DEMO

只显示一组兄弟姐妹中的两个人

2 个答案:

演示：http://jsfiddle.net/ff7sb59n/1/