查找所有链接并制作列表

发布于 2024-10-06 16:47:11 字数 2698 浏览 0 评论 0原文

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

例如：

Lorem ipsum dolor 坐下来，conectetur adipiscing elit。 Donec sat amet ipsum ut justo发酵hendrerit ultricies。

所以，这将变成：

Lorem ipsum
多洛
坐阿梅特，
概念
adipiscing 精英。
多内克
sit amet ipsum ut justo发酵亨德里特·特里斯。

基本上我的网站使用 embed.ly，因此当用户填写表单时，youtube/flickr 链接会自动出现在他创建的位置。我遇到的问题是 YouTube 视频的缩略图似乎太大，并且无法正确切换（即我希望用户单击缩略图才能显示视频）。（因此，例如，如果用户单击 dolar 链接，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>&#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>

抱歉，问题很长。干杯。

原文

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>ＵＥＦＡ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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

來不及說愛妳 2024-10-13 16:47:11

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

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

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

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

回复收藏 0 原文

浪荡不羁 2024-10-13 16:47:11

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

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

从那里，您可以 wrap

...

块中的元素。

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

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.

回复收藏 0 原文

独孤求败 2024-10-13 16:47:11

var links = document.anchors;

或者

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

var links = document.anchors;

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

回复收藏 0 原文

指尖微凉心微凉 2024-10-13 16:47:11

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

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

~没有更多了~