Die Suche nach allen Links und eine Liste machen

Question

Wie können Sie alle Links finden (keine Anker) und legen Sie sie in einer Liste, in der Reihenfolge, dass sie erscheinen, in jQuery.

Zum Beispiel:

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

Also, das würde:

Lorem ipsum

• dolor

sit amet,

• consectetur

adipiscing elit.

• Donec

sit amet ipsum ut justo fermentum hendrerit ultricies.

Im Grunde bin ich mit embed.ly für meine Website, so dass, wenn ein Benutzer füllt in einer Form, die youtube / flickr Links automatisch erscheinen, wo er sie geschaffen hat. Das Problem, das ich habe, ist, dass die Miniaturansicht für das YouTube-Video zu groß zu sein scheint, und nicht Toggle richtig (das heißt ich der Benutzer auf dem Vorschaubild klicken möge für das Video zu zeigen). (So, zum Beispiel, wenn der Benutzer klickt auf der dolar Link, das YouTube-Video unten, damit er angezeigt werden soll, wie es in den embed.ly Proben der Fall ist).

Ich bin mit PHP auf der Server-Seite mit PHP-Abschlag.

Der Abfrage-Code für embedly unter:

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

Die html meiner Seite macht, wenn eine Videoverbindung hinzufügt, ist:

>    <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 für die längliche Frage. Prost.

Answer 1

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

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

Answer 2

Sie könnten möglicherweise (lesen „ungetestet“) finden Sie alle Nicht-Anker-Links mit so etwas wie

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

Von dort konnte man wickelt das Element in einem <ul><li>...</li></ul> Block.

Beachten Sie, dass, wenn Sie wollen, die Links an Ort und Stelle zu ersetzen, müssen Sie möglicherweise die umgebende Absatz abzusperren (wenn Sie einen Absatz verwenden) als Listen gehören nicht da.

Answer 3

var links = document.anchors;

oder

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>