从 div 中检索链接并将它们显示在第一个 div 正下方的另一个容器中

Question

对于我的问题，我想不出更好的标题了。我正在尝试做的事情如下：

我有：

我有一系列具有相同 class 名称的 div。
每个 div 都有一个具有相同 class 名称的段落。
每个段落一个元素。
除此之外，我还有另一系列 div 具有相同的 class 名称

我需要的 我希望能够从第一个 div 捕获 link，从那个 link 中获取我需要的内容，并在第二个 div.[=15= 中显示它]

我不是新手jquery，但我不是专家，也不是所有功能我都知道，我该如何实现？

脚本：

$(function() {
var r;
var external_url;
var final_url;

  $(".a a").each(function(){

    if($(this).attr('href')=='http://www.sample.com'){

        $(".b a").each(function(){

        r = $(".b a").attr("href");

        var index_of_1 = r.indexOf("index.php?l=");

        external_url = r.substring(parseInt((index_of_1 + 1) + 5));

        var index_of_2 = external_url.indexOf("&h=");

        final_url = external_url.substring(0, index_of_2);

    }
  });

   $(".link_above").html("<a class='ext_url' href='" + decodeURIComponent(final_url) + "'>Preview</a>");
        }); 


});

sample.html

<div class="a">
  <a href="http://www.sample.com">Site 1</a>
</div>

<div>
  <p class="b">This is a <a href="http://www.web.com/index.php?l=link1&h=3">link 1</a> example</p>
</div>
<div class="link_above"></div>
<hr />

<div class="a">
  <a href="http://www.sample.com">Site 2</a>
</div>

<div>
  <p class="b">This is a <a href="http://www.web.com/index.php?l=link2&h=3">link 2</a> example</p>
</div>
<div class="link_above"></div>
<hr />

<div class="a">
  <a href="http://www.sample.com">Site 3</a>
</div>

<div>
  <p class="b">This is a <a href="http://www.web.com/index.php?l=link3&h=3">link 3</a> example</p>
</div>
<div class="link_above"></div>

结果：

Site 1
This is a link 1 example

Site 2
This is a link 2 example

Site 3
This is a link 3 example

我期待的

Site 1
This is a link 1 example
link1

Site 2
This is a link 2 example
link2

Site 3
This is a link 3 example
link3

我希望我已经完全清楚了。提前致谢，

Answer 1

首先你必须稍微改变你的结构，这样 div 从我们获取 link 的地方和我们需要放置它的 div 是都在一个名为 "container" 的 div 中（为了更容易）。

结构如下

<div class="a">
  <a href="http://www.sample.com">Site 1</a>
</div>

<div class="container">
  <div>
    <p class="b">This is a <a href="http://www.web.com/index.php?l=link1&h=3">link 1</a> example</p>
  </div>
  <div class="link_above"></div>
 </div>
<hr />

<div class="a">
 <a href="http://www.sample.com">Site 2</a>
</div>

<div class="container">
  <div>
    <p class="b">This is a <a href="http://www.web.com/index.php?l=link1&h=4">link 1</a> example</p>
  </div>
  <div class="link_above"></div>
</div>
<hr />

<div class="a">
  <a href="http://www.sample.com">Site 3</a>
</div>

<div class="container">
  <div>
    <p class="b">This is a <a href="http://www.web.com/index.php? l=link1&h=5">link 1</a> example</p>
  </div>
  <div class="link_above"></div>
</div>

和jQuery这样

$(function() {
   var i = 1;
   $(".link_above").each(function(){
    var link = $(this).parent().find('a').attr('href')
    $(this).html("<a href='"+link+"'>link"+i+"</a>")
    i++;
   })
});

这是小提琴 Fiddle

从 div 中检索链接并将它们显示在第一个 div 正下方的另一个容器中

Retrieve links from divs and displaying them in another container right below the first div

html

javascript

jquery