Поиск всех ссылок и составление списка
Вопрос
Как вы можете найти все ссылки (без якорей) и поместить их в список, в том порядке, в котором они появляются, в jQuery.
Например:
Лорем Ипсум Долор сидеть амет, Последование Адиписская элита. Донек Сидеть амет ипсум ут юж Ферментум Хендрит Ультрацины.
Итак, это стало:
Лорем Ипсум
сидеть амет,
Адиписская элита.
Сидеть амет ипсум ут юж Ферментум Хендрит Ультрацины.
По сути, я использую Embed.ly для своего сайта, поэтому, когда пользователь заполняет форму, ссылки на YouTube/Flickr автоматически появляются там, где он их создал. Проблема, с которой у меня есть, заключается в том, что миниатюра для видео на YouTube кажется слишком большой и не переключается должным образом (т.е. я хочу, чтобы пользователь нажимал на миниатюру, чтобы отображаться видео). (Так, например, если пользователь нажимает на Dolar Link, под ним должно появиться видео YouTube, как и в образцах Embed.ly).
Я использую PHP на стороне сервера с PHP Markdown.
Код запроса для вообще ниже:
<script type="text/javascript">
$(document).ready(function() {
$("a").embedly({}, function(oembed, dict){
if ( oembed == null)
alert("no embedly content found");
var output = "<a class='embedly' href='#'><img src='"+oembed.thumbnail_url+"' /></a><span>"+oembed.title+"</span>";
output += oembed['code'];
$(dict["node"]).parent().html( output );
});
var anchors = $("a"); anchors.embedly(); anchors.filter("[href*=flx.me]").addClass("googlenl");
$('a.embedly').live("click", function(e){
e.preventDefault();
$(this).parents('li').find('.embed').toggle();
});
});
</script>
HTML, который делает мой сайт, когда добавляет ссылку на видео:
> <div id="content">
> <div class="youtube">
> <p><a class="embedly" href="#"><img
> src="phpForum_files/hqdefault.jpg"></a><span>UEFAChanpions
> League 2005-2006 RealMadrid vs Arsenal
> 2ndleg</span><div
> class="embed"><object height="360"
> width="640"><param name="wmode"
> value="opaque"><param name="movie"
> value="http://www.youtube.com/v/7aPGa9Gqj2c?fs=1"><param
> name="allowFullScreen"
> value="true"><param
> name="allowscriptaccess"
> value="always"><embed
> src="phpForum_files/7aPGa9Gqj2c.swf"
> type="application/x-shockwave-flash"
> allowscriptaccess="always"
> allowfullscreen="true" wmode="opaque"
> height="360"
> width="640"></object></div></p>
> </div> </div>
Извините за удлиненный вопрос. Ваше здоровье.
Решение
$("#container").find("a").wrap("<li />").wrap("<ul />");
Демонстрация: http://jsfiddle.net/karim79/rmcgh/
Другие советы
Вы могли бы (читать «непроверенные») найти все некольные ссылки, используя что-то вроде
$('a').not('[href^="#"]')
Оттуда вы могли бы сворачивать элемент в <ul><li>...</li></ul>
блокировать.
Имейте в виду, что если вы хотите заменить ссылки на месте, вам может потребоваться закрыть окружающий абзац (при использовании абзаца), поскольку списки там не принадлежат.
var links = document.anchors;
или
var links = element.getElementsByTagName('a');
<p>
Lorem ipsum <a href="http://www.link1.com" rel="nofollow">dolor</a> sit amet, <a href="http://www.link2.com" rel="nofollow">consectetur</a> adipiscing elit. <a href="http://www.link3.com" rel="nofollow">Donec</a> sit amet ipsum ut justo fermentum hendrerit ultricies.
</p>
<script type="text/javascript">
$("p a").wrap("<ul><li></li></ul>");
</script>