Внутри HTML У меня есть этот DIV:JQuery удаление HTML-элементов внутри переменной (JQuery объект)
<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();
Изменение последовательности в chainings не сработало (хотя я, возможно, пропустили один или другой).
Это решение, как представляется, хорошо:
var teaser = $(".teaser").html().replace(/(<img.*?)+<br[^>]*?/i,"");
Однако, в зависимости от регулярного выражения реализации в браузерах может быть шатким, поэтому я предпочел бы что-то более надежное, особенно не получает первую строку на всех.
TIA за любое предложение - надеюсь, что смогу проясниться.
Edit:
использованием 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()
удаляет все, кроме ГИМ, который находится за пределами моей головы, за исключением not()
var teaser = $(this).clone().find("img").remove();
Edit 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. Кроме того, end()
будет держать remove()
от еще пройдя весь путь к DOM ...
$.trim
технически не нужно, конечно, HTML игнорирует пустые строки в любом случае.
Так в том числе выше обходного с регулярным выражением есть, по крайней мере, три способа пойти - своего рода напоминает мне о Perl;)
Благодаря как @karaxuna и @Ravi для обмена опытом и идеями!
Вы правы насчет HTML() и я удалил его. Это необходимо только в методе замены(). – JayAitch
Это полностью удаляет IMG. 'var teaser = $ (" teaser "). clone(). find (" img "). remove();' хранит IMG, но удаляет текст (sic!), в то время как 'var teaser = $ (" teaser ") .clone(). not ("img"); 'сохраняет весь DIV (над моей головой), используя' filter ("img") 'вместо этого приводит к отсутствию заголовка (имеет смысл). – JayAitch
@JayAitch см. Вопрос edit – karaxuna