JQUERY JS - Traversing up the DOM

traversing-up-the-dom.js

// see here for details: http://stackoverflow.com/questions/8305595/jquery-traversing-dom-to-get-to-an-element

// I have mark up as follows:

		<div class="sub-category-heading" >
			<h3 class="arrow-styling" >Samsung News</h3>
		</div>
		<div class="main-category-page" >
			<div class="blogpost small-format" >
				<div class="image" > 
					<img src="<?php bloginfo(template_directory); ?>/images/thumbnail-2.jpg" />
					<div class="blogpost-overlay"> 
								<p>What better way to showcase your products than by giving them the stage? 
								This is the concept behind a growing trend in e-commerce web design – going minimal.</p>
								<a href="#" class="arb-button" >Read more</a>
					</div>
				</div>
			</div>
			<div class="cat-thumbnails" > 
				<div class="individual-cat-thumbnail thumb-active" >
						<img src="<?php bloginfo(template_directory); ?>/images/thumbnail-2-small.jpg" />
						<div class="thumbnail-overlay" ></div>
						<h4>This is the title of an article dude</h4>
				</div>
			</div>
		</div>
		
// i want to click on blogpost and then be able to get the nearest
// arrow styling above
// to do so, i use hte following jquery code:
				$('.individual-cat-thumbnail').mouseover( function() {

					var $this = $(this);
					var $thumbnailTitle = $this.find('h4').text();
					console.log($thumbnailTitle);

					var $test2 = $this.closest('.main-category-page').prev().find('h3').text();
					
					console.log($test2);
					
				});