javascript - 如何定位在其父元素中具有类的子元素？

Question

我正在尝试弄清楚如何在其子元素中定位父元素。如果该子元素具有名为 caption1 的特定类，则图像将向左浮动，如果为 caption2，则图像将向右浮动。我在浏览器中调试了代码并注意到它被跳过了，这对我来说意味着条件为假，我如何制作所需的条件语句 if($('#opt-pos-img-responsive > div' .hasClass('.caption2')) true 根据类名决定左浮还是右浮？

我重新创建了一个 jsfiddle.net我遇到的问题。代码也在下面。

HTML:

<a id="opt-pos-img-responsive" href="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150" class="img-responsive">
        <!--<div class="caption1"> 
            <h2>Lorem Ipsum</h2>
            <h3></h3>
        </div>-->
        <div class="caption2"> 
<!--
<h2>Lorem Ipsum <br/><span>dolor<br/> sit amet</span> elit</h2>
<h3></h3>
<button class="btn">Learn More</button>
-->
            <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
            <h3>Lorem ipsum dolor sit<br> sed diam</h3>
            <button class="btn">Learn More</button>
        </div>
</a>

JS:

// remove certain classes and styles for devices less than 991px
$(document).ready(function(){
        $('#opt-pos-img-responsive > div').css('border','1px dotted blue');
        if($('#opt-pos-img-responsive > 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 > div').hasClass('.caption1'))
        {
            $('img-responsive').css('float','left !important');
        }
    }
});

Answer 1

如果我理解正确，当标题有类“caption1”时，img 应该向左浮动。如果标题具有类“caption2”，则图像应向右浮动。

为此，您可以检查图像的 sibling 及其类别。

$("img").each(function() {
    if ($(this).siblings().hasClass("caption1")) {
      $(this).css("float", "left");
    } else if ($(this).siblings().hasClass("caption2")) {
      $(this).css("float", "right");
    }
  });

JSFiddle