Question

我试图找出如何在其子元素中定位父元素。如果该子元素具有名为use HTML::TreeBuilder; my $html = <<END; <div id="container"> <form id="form" action="../code.cgi" method="post"> <label id="lblMessage" class="text">Message</label> </form> </div> END my $root = HTML::TreeBuilder->new_from_content( $html ); $root->elementify(); # Become a tree of HTML::Element objects. my $message = $root->find_by_attribute( 'id', 'lblMessage' ) or die "No such element"; $message->delete_content(); $message->push_content('I am new stuff'); print $root->as_HTML();的特定类，则图像将向左浮动，如果caption1，则图像将向右浮动。我在浏览器中调试了代码并注意到它被跳过了，这意味着我的条件是错误的，如何根据类名来确定所需的条件语句caption2是否为真，以决定是向左还是向右浮动？

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

HTML：

if($('#opt-pos-img-responsive > div').hasClass('.caption2'))

JS：

<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>

Answer 1

如果我理解正确，当标题有类＆＃34; caption1＆＃34; img应该向左浮动。如果标题有类＆＃34; caption2＆＃34;图像应该向右浮动。

为此，您可以查看图片的兄弟姐妹及其班级。

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

JSFiddle

Answer 2

试试这个：

(function(){
if(
$("#opt-pos-img-responsive").find("div").hasClass("caption1")){
    $(".img-responsive").css({"float":"left"})
}
else{
    $(".img-responsive").css({"float":"right"})
}
})();

Answer 3

我不知道我是否完全理解你想要实现的目标，但是如果你想要定位具有给定类的元素的父元素，你可以这样做：

$('.caption-one').each(function(){
  var $el = $(this.parentElement);
  $el.css('float', 'left');
});
$('.caption-two').each(function(){
  var $el = $(this.parentElement);
  $el.css('float', 'right');
});

这会将标题1的父级浮动到左侧，标题2浮动到右侧。

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

3 个答案: