Question

我需要使用jQuery更改一些HTML - （我无法控制HTML因此我需要使用客户端进行这种轻微的更改）

如果<br />是名为“列”的div中的第一个元素，那么我需要删除它。

所以：

<div class="column">
   <br />text here lorem ipsum blah<br />

会变成：

<div class="column">
   text here lorem ipsum blah<br />

注意，我不想删除所有<br />标记，只有<br />标记直接位于开头标记后面。

我曾希望这样的事情会起作用，但没有快乐

$('<div class="column"><br />').replaceWith('<div class="column">');

任何帮助表示赞赏！非常感谢！

Answer 1

这样的事情应该这样做：

var pattern = /^<br\/>/;
$("<div.column").each(function() {
    var $this = $(this),
        text = $this.text();
    if(text.match(pattern)) {
        $this.text(text.replace('<br/>', ''))
    }
});

（忽略 - 留在原处以便理解下面的评论）

修改

试试这个：

var pattern = /^\n*\s*<br>/;
$("div.column").each(function() {
    var $this = $(this),
        html = $this.html();
    if(html.match(pattern)) {
        $this.html(html.replace(pattern, ''))
    }
});

<强> DEMO

正如@minitech指出的那样，任何事件处理程序和附加到原始HTML的数据都将丢失，因此：

在附加任何事件处理程序/数据之前进行替换
采取措施在替换后重新实例化事件处理程序/数据
将事件处理委托给容器元素
做一些非破坏性的完全不同的事 - 请参阅@minitech的回答。

第二次编辑

经过多次演奏，终于简洁明了。试试@ minitech的100％jQuery版本的方法：

$('.column').each(function() {
    $.each(this.childNodes, function(i, c) {
        return !$(c).filter('br').remove().end().text().trim(); 
    });
});

<强> DEMO

说明：内部循环依次访问每个childNode;如果当前节点为<br>，则其单个语句将删除当前节点，但仅当当前节点为空或空格时才允许循环进行。请注意明智地使用.end()将所有内容保存在一个方法链中。

效率：差 - jQuery方法链必须消耗几个CPU周期，但这似乎是一个很小的代价。

Readabiity：接近nada。

第三次编辑

使用温和的模式，这将处理前导空格/ BR / HTML注释的任意组合：

$('.column').each(function() {
    $(this.childNodes).each(function(i, c) {
        return !$(c).filter('br').remove().end().text().trim(); 
    });
});

与上一版本的不同之处在于jQuery对象$(this.childNodes)不受节点删除的影响，而原始this.childNodes受到影响且.each()循环无法正常扫描。至少，这是我解释的最佳尝试。

<强> DEMO

Answer 2

原始节点操作！

$('.column').each(function() {
    var firstChild = this.firstChild;

    while(firstChild && (firstChild.nodeType === 3 && /^\s*$/.test(firstChild.nodeValue) || firstChild.nodeType === 8)) {
        firstChild = firstChild.nextSibling;
    }

    if(firstChild && firstChild.nodeName === 'BR') {
        this.removeChild(firstChild);
    }
});

Here's a demo.

Answer 3

如果在第一个位置删除它怎么样？

var relevantDiv = $('#someDiv');
var divHtml = relevantDiv.html();
if ($.trim(divHtml).indexOf('<br') == 0)
{
    relevantDiv.html(divHtml.substr(divHtml.indexOf('>')+1));
}

在开始时处理所有类型的br标签和空白。

Answer 4

怎么样：

$("div.column").each(function(){
    var ws=true;
    $(this).contents().filter(function(){
        if (this.nodeName.toLowerCase() === 'br' && ws){
            ws = false;
            return true;
        }
        ws &= $.trim($(this).text()) === "" && this.nodeName === "#text";
        return false;
    }).remove();
});

http://jsfiddle.net/bnWM7/1/

Answer 5

这家伙怎么样：

var br = $("div.column br:first-child");

if(br.length > 0 && br[0].previousSibling == null)
{
    br.remove();
}

http://jsfiddle.net/zeDn3/3/

Answer 6

尝试这样的事情：

    var content = $('div.column').html();
    // there remove <br /> from content if it exits
    $('div.column').empty().append(content);

jQuery - 使用remove或replaceWith更改HTML

6 个答案:

修改

第二次编辑

第三次编辑