jQuery：检查BR是否存在第一个或最后一个元素，包括段落中的文本节点

Question

我希望在jQuery中测试<br />是否存在于段落中的第一个或最后一个元素（包括文本节点）。下面的两个例子是真的：

<p>
    <br />
    Lorem ipsum dolor sit amet consectetur, adiscipling elit.
</p>

<p>
    Lorem ipsum dolor sit amet consectetur, adiscipling elit.
    <br />
</p>

虽然这个例子是假的：

<!-- This is false -->
<p>
    Lorem ipsum dolor sit amet consectetur, adiscipling elit
    <br />
    Lorem ipsum dolor sit amet consectetur, adiscipling elit.
</p>

如果为true，则将以下class的diog-fail brbr应用于包含段落元素。

Answer 1

使用通用支持的DOM属性很容易。 jQuery在这里用得不多。

function isBr(el) {
    return el && el.nodeType == 1 && el.tagName == "BR";
}

function isWhitespaceNode(node) {
    return node.nodeType == 3 && /^\s*$/.test(node.data);
}

function isFirstOrLastChildBr(el) {
    var first = el.firstChild;
    if (isWhitespaceNode(first)) first = first.nextSibling;
    if (isBr(first)) return true;

    var last = el.lastChild;
    if (isWhitespaceNode(last)) last = last.previousSibling;
    if (isBr(last)) return true;

    return false;
}

所以如果你的qazxsw poi元素有id“foo”：

<p>

更新多个元素的示例

要将其应用于一组匹配的元素：

var $foo = $("#foo");
if ( isFirstOrLastChildBr($foo[0]) ) {
    $foo.addClass("diog-fail brbr");
}

Answer 2

根据您提供的测试用例，这将起作用：

// All paragraphs
$("p").filter(function() {
    return isFirstOrLastChildBr(this);
}).addClass("diog-fail brbr");

jQuery并不多，因为jQuery隐藏了许多讨厌的DOM业务，包括文本节点。

$('p').each(function ()
{
    var $this = $(this),
        $brs = $this.children('br'),
        numBRs = $brs.length,
        firstBR = $brs.get(0),
        firstBRprev = firstBR ? firstBR.previousSibling : null,
        firstBRnext = (firstBR && numBRs == 1) ? firstBR.nextSibling : null,
        lastBR = numBRs > 1 ? $brs.get(numBRs) : null,
        lastBRnext = lastBR ? lastBR.nextSibling : null;

    if ((firstBRprev && !firstBRprev.nodeValue.trim()) ||
        (firstBRnext && !firstBRnext.nodeValue.trim()) ||
        (lastBRnext && !lastBRnext.nodeValue.trim()))
    {
        console.log(this);
        $this.addClass('diog-fail brbr');
    }
});

Answer 3

这是jsfiddle：

Demo →

Using RegEx and If Else condition

首先获取所有段落然后在innerHTML上使用RegEx并通过删除空格，换行符等来展平它。然后执行if else条件以查看第一个和最后几个子串匹配

    $('p').each(function() {
        var temp = this.innerHTML.replace(/^\s*|\s(?=\s)|\s*$/g, "").toLowerCase();
        if (temp.substring(0, 5) == '<br/>' || temp.substring(0, 4) == '<br>' || temp.substring(0, 6) == '<br />') {
            $(this).addClass('diog-fail brbr');
            console.log('start: true');
        } else if (temp.substring(temp.length - 5, temp.length) == '<br/>' || temp.substring(temp.length - 4, temp.length) == '<br>' || temp.substring(temp.length - 6, temp.length) == '<br />') {
            $(this).addClass('diog-fail brbr');
            console.log('end: true');
        } else {
            console.log('none: ' + false);
        }
    });

Answer 4

怎么样：

<br>, <br/> or <br />

用法：

function brIsFirstOrLast(selector) {
    var contents = $(selector).contents().filter(function() {
        return this.nodeType !== 3 || $.trim($(this).text().replace("\n", "")) !== "";
    });

    var last = contents.last()[0];
    var first = contents.first()[0];

    return (!!last.tagName && last.tagName.toLowerCase() === "br") ||
        (!!first.tagName && first.tagName.toLowerCase() === "br");
}

请注意，此函数需要选择器返回一个结果。您可以添加更多验证，但这应该可以帮助您入门。

看到它工作：brIsFirstOrLast("p:first");

Answer 5

我建议使用一点RegExp：

http://jsfiddle.net/andrewwhitaker/F2dwm/

否则，您将不得不在处理空白作为textNodes时遇到浏览器依赖性

Answer 6

好的，这是一个（只是略显笨重）的方式，给出以下html用于演示目的：

html

//returns true if there is a <br/>   at begin or end, otherwise false 
$.trim($('p').html()).match(/(^<br\s*\/?>|<br\s*\/?>$)/i)

css

<div class="testThis">
    <p>Some text, or other with a 'br' at the end.<br /></p>
</div>

<div class="testThis">
    <p><br />Some more text, with a 'br' at the beginning.</p>
</div>

<div class="testThis">
    <p>Some text with a 'br' <br /> in the middle</p>
</div>

jQuery

.testThis {
    border: 1px solid #ccc;
    margin: 0 auto 1em auto;
    padding: 0.5em;
    width: 80%;
    border-radius: 1em;
}

.brFirst {
    border-color: #f00;
}

.brLast {
    border-color: #00f;
}

$('.testThis').each(
    function(){
        var haystack = $(this).find('p').html();
        var needle = '<br>';

        //alert(haystack.indexOf('<br>'));
        if (haystack.indexOf(needle) == 0) {
            $(this).addClass('brFirst');
        }
        else if (haystack.indexOf(needle) == (haystack.length - needle.length)) {
            $(this).addClass('brLast');
        }
    });

。

---

编辑更新jQuery，使用JS Fiddle demo方法（因此将删除变量trim()的开头和结尾的空格）：

haystack

$('.testThis').each(
    function(){
        var haystack = $(this).find('p').html().trim();
        var needle = '<br>'; // Tested in Chrome the `<br />` element is converted to `<br>`

        if (haystack.indexOf(needle) == 0) {
            $(this).addClass('brFirst');
        }
        else if (haystack.indexOf(needle) == (haystack.length - needle.length)) {
            $(this).addClass('brLast');
        }
    });

。

Answer 7

要在嵌入式编辑器中从Updated JS Fiddle demo内部删除<br>，我使用：

<p>

测试和更改

target.find('p').find('br').each(function () {
    if(! $(this)[0].nextSibling || ! $(this)[0].previousSibling) $(this).remove();
    });

类：

<p>

我希望这有帮助...

糟糕！这个更好：

target.find('p').each(function () {
    let ancestor = $(this);
    $(this).find('br').each(function () {
        console.log(! $(this)[0].nextSibling || ! $(this)[0].previousSibling ? 'edge' : '!edge');
        ancestor.addClass('zorglubissime');
    });
});

Answer 8

使用

target.find('p').each(function () {
    let ancestor = $(this);
    $(this).find('br').each(function () {
        if(! $(this)[0].nextSibling || ! $(this)[0].previousSibling)
            ancestor.addClass('zorglubissime');
    });
});

和:first-child选择器

所以:last-child