javascript - jquery 删除变量内的 html 元素(jquery 对象)

Question

在 HTML 中我有这个 DIV:

<div class="teaser">
  <img src="thumb1.jpg"><img src="thumb2.jpg"><br>  // usually one thumb image; can be up to three
  some text goes here, sometimes not<br>
  <a href="example.html">always a link here</a><br>
  and sometimes another line here
</div>

我需要捕获变量中 DIV 减去第一行(缩略图)的内容，以作为标题(标题)传递给灯箱脚本。然而，一天之内我学到了一些关于 javascript 和 jquery 的知识(两者都是我的弱点)，但我通过搜索网络(包括 stackoverflow 上的几个线程)没有发现任何东西，要么抛出错误，要么仍然包括拇指或也删除文本，甚至从 DOM 中删除缩略图:

// takes the whole
var teaser = $(".teaser");

// TypeError: $(...).html(...).find is not a function
var teaser = $(".teaser").find("img").remove();

// IMGs removed from DOM
var teaser = $(".teaser").find("img").remove();

// IMGs still included; I think I understand why
var teaser = $(".teaser").not("img");

// ditto
var teaser = $(".teaser").clone().not("img");

// ditto:
var teaser = $(".teaser");
$(teaser).find("img").remove();

// no teaser at all (everything removed, not just the IMGs)
var teaser = $(".teaser");
teaser = $(teaser).find("img").remove();

// ditto
var teaser = $(".teaser").clone().find("img").remove();

更改链接中的顺序也不起作用(尽管我可能错过了一个或另一个)。

这个解决方法似乎没问题:

var teaser = $(".teaser").html().replace(/(<img.*?)+<br[^>]*?/i,"");

但是，根据浏览器中的正则表达式实现，它可能不稳定，所以我宁愿有更强大的东西，尤其是根本不获取第一行。

TIA 的任何建议 - 希望我能说清楚。

编辑:

将 clone() 与 children() 或 contents() 结合使用让我更进一步。然而，这两者也会删除第一个文本节点，留下两个空的 BR :

$("div.teaser").each(function() {
  var teaser = $(this).clone().children().not("img");
  var teaser = $(this).clone().contents().not("img");
});

OTOH filter("img")、find("img") 或 not("img") 后跟 remove() 删除除 IMG 之外的所有内容，这超出了我的理解，除了 not()

var teaser = $(this).clone().find("img").remove();

编辑 2:

总结一下:

这是@karaxuna 建议的解决方案。重新分配变量很重要。

var teaser = $(this).clone();
teaser.find("img,br:first").remove();
teaser = $.trim(teaser.html());

在做一些进一步阅读以更好地理解失败背后的逻辑和最终解决方案时，我得到了一个线索，可以稍微多做一些 jquerish:

var teaser = $(this).clone();
teaser = $.trim($("img,br:first",teaser).remove().end().html());

线索是添加到 $() 选择器的范围或上下文。在这里使用 this 已经很熟悉了，但我从未想过要使用 var。此外，end() 将阻止 remove() 一直到 DOM...

$.trim 当然在技术上不是必需的，HTML 无论如何都会忽略空行。

因此，包括上述使用正则表达式的解决方法，至少有三种方法可以使用 - 有点让我想起 Perl ;)

感谢@karaxuna 和@Ravi 分享他们的经验和想法!

Answer 1

不需要html()

var teaser = $(".teaser").find("img").remove();

编辑:

试试这个:

var teaser = $(".teaser").clone();
teaser.find("img").remove()
// use teaser