Поиск всех ссылок и составление списка - PullRequest
Новая
       2

Поиск всех ссылок и составление списка

3 голосов
/ 08 декабря 2010

как найти все ссылки (без привязок) и поместить их в список в порядке их появления в jQuery.

Например:

Lorem ipsum Долор Сит Амет, Заведующий Адептос элит. Donec sit amet ipsum ut justo fermentum hendrerit ultricies.

Итак, это станет:

Lorem ipsum

Сит Амет,

Adipiscing Elit.

sit amet ipsum ut justo fermentum hendrerit ultricies.

В основном я использую embed.Для моего сайта, поэтому, когда пользователь заполняет форму, ссылки на YouTube / Flickr автоматически появляются там, где он их создал.У меня проблема в том, что миниатюра для видео на YouTube кажется слишком большой и не переключается должным образом (т.е. я хочу, чтобы пользователь щелкнул миниатюру, чтобы видео появилось).(Так, например, если пользователь нажимает на ссылку dolar, под ней должно появиться видео YouTube, как это делается в примерах embed.ly).

Я использую php на стороне сервера с phpmarkdown.

Ниже приведен код запроса для встраивания: 

<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>&#65333;&#65317;&#65318;&#65313;Chanpions
> 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>

Извините заудлиненный вопрос.Приветствия.

Ответы [ 4 ]

2 голосов
/ 08 декабря 2010 
$("#container").find("a").wrap("<li />").wrap("<ul />");

Демо: http://jsfiddle.net/karim79/RmCGh/

0 голосов
/ 08 декабря 2010 
 <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>
0 голосов
/ 08 декабря 2010 
var links = document.anchors;

или 

var links = element.getElementsByTagName('a');
0 голосов
/ 08 декабря 2010

Вы могли бы (читай "непроверенный") найти все неякорные ссылки, используя что-то вроде 

$('a').not('[href^="#"]')

Оттуда вы можете обернуть элемент в блоке <ul><li>...</li></ul>.

Имейте в виду, что если вы хотите заменить ссылки на месте, вам может потребоваться закрыть окружающий абзац (если он используется), поскольку списки там не принадлежат.

...