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 の内容から最初の行 (つまみ) を引いたものを変数に取り込んで、タイトル (キャプション) としてライトボックス スクリプトに渡す必要があります。ただし、1日でjavascriptとjquery（どちらも私の弱点です）について何かを学びましたが、ここでstackoverflowのいくつかのスレッドを含め、Webを検索して見つけたものは何もありませんでした。テキストも削除するか、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()、さらに一歩進めました。ただし、これらはどちらも最初のテキスト ノードも削除し、2 つの空を残します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());

$()手がかりは、セレクターに追加されたスコープまたはコンテキストです。ここでこれを使用することはよく知られていますが、var. また、まだ DOM までは行かないようにしますend()...remove()

$.trimもちろん、技術的には必要ありませんが、HTML はとにかく空行を無視します。

したがって、正規表現を使用した上記の回避策を含めると、少なくとも 3 つの方法があります。ちょっと Perl を思い出します ;)

経験とアイデアを共有してくれた @karaxuna と @Ravi の両方に感謝します!

Answer 1

の必要はありませんhtml()

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

編集：

これを試して：

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

Answer 2

HTML全体を削除したい場合。次に、empty（）メソッドを使用できます

$(".teaser").empty();

画像のみを削除する場合。それから

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

Answer 3

遅くなりましたが、やってみてください$('img',$('.teaser')).remove().end().clone()