JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div id="block-hrwff-relatedfilms-films" class="block block-hrwff-relatedfilms contextual-links-region">
  <h2>Related Films</h2>
  <div class="contextual-links-wrapper contextual-links-processed">
    <a class="contextual-links-trigger" href="#">Configure</a>
    <ul class="contextual-links">
      <li class="block-configure first last">
        <a href="/admin/structure/block/manage/hrwff_relatedfilms/films/configure?destination=node/926%3Fcity%3Damsterdam">Configure block</a>
      </li>
    </ul>
  </div>
  <div class="content">
    <div about="/content/2015-01-31-first-fall-de-balie" typeof="sioc:Item foaf:Document" class="ds-1col node node-event node-promoted node-teaser contextual-links-region view-mode-teaser clearfix">
      <div class="contextual-links-wrapper contextual-links-processed">
        <a class="contextual-links-trigger" href="#">Configure</a>
        <ul class="contextual-links">
          <li class="node-edit first">
            <a href="/node/1002/edit?destination=node/926%3Fcity%3Damsterdam">Edit</a>
          </li>
          <li class="node-delete">
            <a href="/node/1002/delete?destination=node/926%3Fcity%3Damsterdam">Delete</a>
          </li>
          <li class="manage-display last">
            <a href="/admin/structure/types/manage/event/display/teaser?destination=node/926%3Fcity%3Damsterdam">Manage display</a>
          </li>
        </ul>
      </div>
      <div class="field field-name-field-ticket-link field-type-link-field field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <a href="http://www.debalie.nl/agenda/cinema/hrw+-first-to-fall/e_9758237/p_11695885/" class="ticket-link">Buy Tickets</a>
          </div>
        </div>
      </div>
      <div class="field field-name-field-film field-type-entityreference field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <div about="/film/first-fall" typeof="sioc:Item...

CSS

body {
  font: 15px/1.333em "Trebuchet MS", helvetica, Arial, sans-serif;
  color: #aaa;
  background: #323232;
}
dl dd { margin-left: 1em; }
a { text-decoration: none; color: #0069b2; }
h1 { margin-bottom: 18px; line-height: 1; font-weight: normal; color: #323232; }
h2 { margin: 1em 0; font-weight: normal; line-height: 1.25; }
h2 span { font-weight: normal; }
h2.column { margin: 20px 10px 20px 10px;}

.field .field-label { font-weight: normal; }
.field-label-inline .field-label,
.field-label-inline .field-item,
.field-label-inline .field-items{ display: inline; float: none; }

/*layout*/
#content { position: relative; }
#content-bottom.row { overflow: visible; }
#sidebar-right{position:relative; z-index:10;}

/*top*/
#top { height: 30px; background: #e6e6e6; }

/*page*/
#page { background: #fff; color: #231f20; }

/*header*/
#header {-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,.25); -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,.25); box-shadow: 0 8px 6px -6px rgba(0,0,0,.25); width: 110%; margin: 0 -5%; position: relative; z-index: 10; }
#header .row { padding: 20px 0 22px; position:relative; overflow: visible; }
#logo img { width: 450px; padding-left: 10px; }
nav { font-family: "Trebuchet MS", helvetica, Arial, sans-serif; position: relative; height: 57px; }
nav.column { overflow: visible; }
nav #primary { position: absolute; bottom: 0; }
nav #primary li { text-transform: uppercase; }
nav #primary li.first { display: none; }
nav #primary li a { color: #000; text-decoration: none; font-size:14px; font-weight: bold; }
nav #primary li.active-trail a { color: #CF406E; }
#pull, #close, #nav-donate, #nav-hrw { display: none; }

/*social*/
#social-links { font-size: 0; border-right: 2px solid #fff; position: absolute; top: -50px; right: 258px; }
#social-links span { font-family: 'ff-meta-web-pro', sans-serif; display: inline-block; font-size: 13px; line-height: 1; padding: 9px; color: #b4b4b4; }
#social-links a { background: #b4b4b4; border-left: 2px solid #fff;...

JavaScript

console.log('test');

var relatedFilms = $('#block-hrwff-relatedfilms-films .content');

console.log(relatedFilms);

$(relatedFilms).find('.node-event .field-name-field-film .field-items .field-item .node-film .field-name-title .field-items .field-item h2 a').each(function(i, obj) {
    var href = $(obj).attr('href');
    console.log(href);
});