Question

All,
I’m using WordPress so I know the main content falls within the following div:

<div id="content" role="main">

I’m trying to use the jQuery load function to display only the content in between those tags. How can I say the id of content but the role of main?

I tried to do the following:

page_url = $(this).attr("href");
$("#menu_content").load(page_url + ' #content main');

This doesn’t display anything though. Any ideas on how to do this? Thanks!

Answer 1

Try this:

 $("#menu_content").load(page_url + ' #content[role="main"]');

Am using an Attribute selector but only sense of using this would be if you have different “role” under different circumstances but it really makes no sense adding anything to an ID selector

http://api.jquery.com/category/selectors/

If you want only what is inside #content use $.get

  $.get(page_url, function(data){
   $("#menu_content").html( $(data).find('#content').html());
  })