Question

我有这个：

<p>
<br>
<br>
JQuery problems again...
<br>
<br>
Why me...?
</p>

我试过用这个：

$("p").children(":first-child").nextUntil(":not(br)").remove();

但我最终得到了这个：

<p>
JQuery problems again...Why me...?
</p>

根据我的理解，如果我错了，请纠正我，代码会搜索的第一个孩子，这将是第一个 ，然后删除之前出现的所有孩子文本。

我想要做的就是删除 元素中文本之前出现的第一个。你能告诉我怎么做吗？

Answer 1

CSS选择器永远不能匹配 text 本身的元素。 jQuery没有那么多支持匹配文本节点。我想你必须做这样的事情：

$("p").each(function () {
  $($(this).contents()).each(function () {
    if (this.nodeType === 3 && /\S/.test($(this).text())) {
      // Found some text, so stop removing elements.
      return false
    } else if ($(this).is("br")) {
      $(this).remove()
    }
  })
})

Answer 2

如果您将HTML更改为文本位于范围内的HTML：

<p>
    <br>
    <br>
    <span>JQuery problems again...</span>
    <br>
    <br>
    <span>Why me...?</span>
</p>

然后，您可以使用此jQuery删除那些前导的标签：

$("p br:first-child").nextUntil(":not(br)").andSelf().remove();

在此处查看：http://jsfiddle.net/jfriend00/W2W5F/

Answer 3

看起来jQuery在这里并没有多大帮助，所以不要试图强制它，这看起来像普通javascript的工作（除了识别p标签）。这将适用于您现有的HTML，而不会在文本周围添加标记。

$("p").each(function() {
    var children = this.childNodes;
    var removals = [], child, i;
    for (i = 0; i < children.length; i++) {
        child = children[i];
        // nodeType 1 is ELEMENT_NODE
        if (child.nodeType == 1) {
            if (child.nodeName.toLowerCase() == "br") {
                removals.push(child);
            }
        }
        // nodeType 3 is TEXT_NODE
        else if (child.nodeType == 3) {
            // stop at first non whitespace text node
            if (child.nodeValue.match(/\S/)) {
                break;
            }
        }
    }
    // now remove the nodes we collected for removal
    // remove outside the first loop because childNodes is a live array
    // and we don't want it changing while iterating it
    for (i = 0; i < removals.length; i++) {
        removals[i].parentNode.removeChild(removals[i]);
    }
});

您可以在此处查看：http://jsfiddle.net/jfriend00/NjaRF/

Answer 4

我知道这是一个很老的问题，但是当我今天遇到类似的问题时，我发现了这个话题。

我刚刚找到了另一种简单的解决方案，也许对某人有用：

$('p').each(function(){
    var h = $(this).html().trim();

    // remove <br> tags before text
    while (h.match(/^<br ?\/?>/gi)) h = h.replace(/^<br ?\/?>/gi, '').trim();

    // remove <br> tags after text
    while (h.match(/<br ?\/?>$/gi)) h = h.replace(/<br ?\/?>$/gi, '').trim();

    $(this).html(h);    
});

JSFiddle演示：http://jsfiddle.net/ULwCL/

JQuery：我试图删除文本前的第一个，但每个都被删除了

4 个答案: