Finding all links and making a list

Question

how can you find all links (no anchors) and place them inside a list, in the order that they appear, in jQuery.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ipsum ut justo fermentum hendrerit ultricies.

So, this would become:

Lorem ipsum

• dolor

sit amet,

• consectetur

adipiscing elit.

• Donec

sit amet ipsum ut justo fermentum hendrerit ultricies.

Basically I'm using embed.ly for my site, so when a user fills in a form, the youtube/flickr links automatically appear where he created them. The problem I'm having is that the thumbnail for the youtube video appears to be too large, and does not toggle properly (i.e. I want the user to click on the thumbnail for the video to show up). (So, for example if the user clicks on the dolar link, the youtube video should appear below it, like it does in the embed.ly samples).

I'm using php on the server side with php markdown.

The query code for embedly is below:

<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>

The html my site makes when a adds a video link is:

>    <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>

Sorry for the elongated question. Cheers.

Answer 1

$("#container").find("a").wrap("<li />").wrap("<ul />");

Demo: http://jsfiddle.net/karim79/RmCGh/

Answer 2

You could possibly (read "untested") find all non-anchor links using something like

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

From there, you could wrap the element in a <ul><li>...</li></ul> block.

Keep in mind that if you're wanting to replace the links in-place, you may need to close off the surrounding paragraph (if using a paragraph) as lists do not belong there.

Answer 3

var links = document.anchors;

or

var links = element.getElementsByTagName('a');

Answer 4

 <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>