查找所有链接并制作列表答案

【问题标题】：Finding all links and making a list查找所有链接并制作列表
【发布时间】：2011-05-21 22:17:50
【问题描述】：

如何在 jQuery 中找到所有链接（没有锚点）并将它们按照出现的顺序放在一个列表中。

例如：

Lorem ipsum dolor sat amet，consecteturadipiscing elit。 Donecsit amet ipsum ut justo bakeum hendrerit ultricies。

所以，这将变成：

Lorem ipsum

dolor

坐下，

consectetur

肥胖精英。

Donec

sit amet ipsum ut justo balloon 亨德利特。

基本上我在我的网站上使用 embed.ly，因此当用户填写表单时，youtube/flickr 链接会自动出现在他创建它们的位置。我遇到的问题是 youtube 视频的缩略图似乎太大，并且无法正确切换（即我希望用户单击缩略图以显示视频）。（因此，例如，如果用户单击 dolar 链接，则 youtube 视频应出现在其下方，就像在 embed.ly 示例中一样）。

我在服务器端使用 php 和 php markdown。

embedly的查询代码如下：

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

抱歉，问题太长了。干杯。

【问题讨论】：

链接是什么，如果它们不是锚点？
@David 我认为 OP 只想捕获 URI 链接而不是“书签”（哈希链接）
是的，对不起，应该只说 URI...

标签： php jquery forms oembed

【解决方案1】：

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

演示：http://jsfiddle.net/karim79/RmCGh/

【讨论】：

这仍然会捕获哈希链接。考虑使用not() 过滤链接集合。此外，请注意生成的标记。列表不属于段落

【解决方案2】：

您可能（阅读“未经测试”）使用类似的东西找到所有非锚链接

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

从那里，您可以wrap <ul><li>...</li></ul> 块中的元素。

请记住，如果您想就地替换链接，您可能需要关闭周围的段落（如果使用段落），因为列表不属于那里。

【讨论】：

【解决方案3】：

var links = document.anchors;

或

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

【讨论】：

不确定“链接（无锚）”是什么意思

【解决方案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>

【讨论】：