Sony ThePony Sony ThePony - 3 months ago 17
HTML Question

jQuery cut out content between 2 tags

Thanks to Turnip below I was able to grab a chunk of HTML.

I would like to add the sections of this chunk to an object like so:
[{"quote":"xxx","author":"yyy"},{"quote":"xxx","author":"yyy"}]

The quote is in the tags:
...



$(document).ready(function() {

var origPage = "";

$.get("https://crossorigin.me/http://www.brainyquote.com/quotes/keywords/websites.html", {}, function(content){
origPage = content;
}, "html");

$("#myLink").on('click', function() {
var kill = origPage;
var oPage = $(kill);
var me = $('.bqQt', oPage);

$("div").html(me);



});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<a class ="clicker" id= "myLink" href="#" >click me</a>





And the autor is between the tags:

...

Right now the html structure for the items is as follows:

<div class="masonryitem boxy bqQt bqShare">
<div class="boxyPaddingBig">
<span class="bqQuoteLink"><a href="/quotes/quotes/j/juliebowen455734.html?src=t_websites" onclick="qCl('keyword','/quotes/keywords/websites','/quotes/quotes/j/juliebowen455734','1')" class="qt_455734" title="view quote">I'm on a strict gossip diet. No gossip websites, no gossip magazines. Otherwise, I find it paralyzing to exist.</a>
</span><br>
<div class="bq-aut"><a href="/quotes/authors/j/julie_bowen.html" onclick="aCl('keyword','/quotes/keywords/websites','/quotes/authors/j/julie_bowen','1')" class="qa_455734" title="view author">Julie Bowen</a></div>
</div>
<div class="bq_q_nav boxyBottom boxyPaddingSmall" style="overflow:hidden;">
<div class="body bq_boxyRelatedLeft bqBlackLink">
<a href="/quotes/topics/topic_diet.html" onclick="kCl('/quotes/topics/topic_diet','/quotes/topics/topic_diet','0',0)">Diet</a>,
<a href="/quotes/keywords/gossip.html" onclick="kCl('/quotes/keywords/gossip','/quotes/keywords/gossip','1',0)">Gossip</a>,
<a href="/quotes/keywords/magazines.html" onclick="kCl('/quotes/keywords/magazines','/quotes/keywords/magazines','2',0)">Magazines</a>
</div>
</div>
<div class="bq_q_nav bq_q_btns boxyPaddingSmall" style="overflow:hidden;">
<div class="bq20">
<div ng-show="showMemberButtons()" class="bqAddQuote bqAddQuoteLg" style="float:right">
<span data-ng-click="onFavoriteClicked(455734)" data-ng-class="favCssClass(455734)" class="fa favHeart pointerCursor" onclick="hCl('/quotes/keywords/websites','/quotes/quotes/j/juliebowen455734','1')"></span><span data-ng-click="onAddToCollectionClicked(455734)" data-ng-class="collectionCssClass(455734)" class="fa favAddToCol pointerCursor" onclick="pCl('/quotes/keywords/websites','/quotes/quotes/j/juliebowen455734','1')"></span>
</div>
<table class="bq_tbl_nospc">
<tbody><tr>
<td valign="top">
<div class="nonJsIcons">
<a href="/share/fb/455734?sr=ql&amp;from=%2Fquotes%2Fkeywords%2Fwebsites.html" class="fa-stack fa-lg fbShare" rel="nofollow" target="_blank">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</a>
<a href="/share/tw/455734?sr=ql&amp;from=%2Fquotes%2Fkeywords%2Fwebsites.html&amp;ti=Websites+Quotes" class="fa-stack fa-lg twShare" rel="nofollow" target="_blank">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</a>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>


I am getting the html using:

<script>

$(document).ready(function() {

var origPage = "";

$.get("https://crossorigin.me/http://www.brainyquote.com/quotes/keywords/websites.html", {}, function(content){
origPage = content;
}, "html");

$("#myLink").on('click', function() {
var kill = origPage;
var oPage = $(kill);
var me = $('.bqQt', oPage);
$("div").html(me);
});

});
</script>

Answer

You already had the dom elements, you just needed to loop them and get the author and quote. Hope this helps.

$(document).ready(function() {

  var apiCall = (function(){
    return $.ajax({
      method: "GET",
      url: "https://crossorigin.me/http://www.brainyquote.com/quotes/keywords/websites.html",
      cache: true
    });
  })();

  var getAuthQuotes = function(elems){
  var quoteArray = [];

  $.each(elems, function(index, elem){
    var obj = {};
    var $elem = $(elem);

     obj.quote = $elem.find('span.bqQuoteLink').text();
     obj.author = $elem.find('div.bq-aut').text();

     quoteArray.push(obj);
  });

  return quoteArray;
}


 $("#myLink").on('click', function(e) {
   e.preventDefault();
   apiCall.then(function(origPage){
     var kill = origPage;
     var oPage = $(kill);
     var me = $('.bqQt', oPage);

     var authQuoteObj = getAuthQuotes(me);

     //here is the array of objects
     console.log(authQuoteObj);
     });
   });

});