title: How to target a child element that has class in its parent element?
body: <p>I'm trying to figure out how to target a parent element within its child element. If that child element has a particular class named <code>caption1</code>, the image will float left, if <code>caption2</code>, the image will float right. I debugged the code in the browser and noticed it skipped over, which means to me that the condition was false, how do I make the required condition statement <code>if($('#opt-pos-img-responsive &gt; div').hasClass('.caption2'))</code> true depending on the class name to decide whether to float left or right?</p>
  
  <p>I recreated a <a href="https://jsfiddle.net/TheAmazingKnight/prcckg8w/" rel="nofollow">jsfiddle.net</a> of the problem I am having. Code is also below.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a id="opt-pos-img-responsive" href="http://placehold.it/350x150"&gt;
          &lt;img src="http://placehold.it/350x150" class="img-responsive"&gt;
          &lt;!--&lt;div class="caption1"&gt; 
              &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
              &lt;h3&gt;&lt;/h3&gt;
          &lt;/div&gt;--&gt;
          &lt;div class="caption2"&gt; 
  &lt;!--
  &lt;h2&gt;Lorem Ipsum &lt;br/&gt;&lt;span&gt;dolor&lt;br/&gt; sit amet&lt;/span&gt; elit&lt;/h2&gt;
  &lt;h3&gt;&lt;/h3&gt;
  &lt;button class="btn"&gt;Learn More&lt;/button&gt;
  --&gt;
              &lt;h2&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/h2&gt;
              &lt;h3&gt;Lorem ipsum dolor sit&lt;br&gt; sed diam&lt;/h3&gt;
              &lt;button class="btn"&gt;Learn More&lt;/button&gt;
          &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>// remove certain classes and styles for devices less than 991px
  $(document).ready(function(){
          $('#opt-pos-img-responsive &gt; div').css('border','1px dotted blue');
          if($('#opt-pos-img-responsive &gt; div').hasClass('.caption2')) // check whether it has the class and change img position
          {
              $('img-responsive').css('float','right !important');
          }
          else if($('#opt-pos-img-responsive &gt; div').hasClass('.caption1'))
          {
              $('img-responsive').css('float','left !important');
          }
      }
  });
  </code></pre>