Why is my jquery call showing up as undefined?

Question

I'm trying to grab a url from an <a> tag and display the first paragraph of the url underneath the title. Currently this returns 'undefined'.

My Html:

<section class="community">
<div class="news">
 <ul class="article-list">
  <li><a href="">This is an article</a></li>
  <li><a href="">This is an article</a></li>
  <li><a href="">This is an article</a></li>

  </ul>
</div>
</section>

My JQuery:

var url = $('.community .news ul li a').attr('href .p1'); 
  $.get(url, function(response) {
  $('.community .news ul li').append("<p>" + url + "</p>");
});

FYI .p1 is a class surrounding the first paragraph in the url (what I'm trying to display basically)

Answer 1

you need to simple get your url bu usin below code

var url = $('.community .news ul li a').attr('href');

i do not understand why you add " .p1" with href ?

try this code to get url

Answer 2

Only $.load supports loading page fragments so with that in mind, try this...

$('.community .news ul li a[href]').each(function() {
    $('<p>').insertAfter(this).load(this.href + ' .p1');
});