使用 LESS 如何从子元素中定位祖父母？

Question

我正在尝试针对具有“s-formgroup”类的 div 的特定弹出框并将其背景设置为红色，因为我有多个弹出框。无论是我的 js 还是我的 less 都能做到这一点

FIDDLE

HTML

<div class="popover>
  <div class="popover-content">
    <div class="form-group s-formgroup">

    </div>
  </div>
</div>

CSS 少

.popover {
    .popover-content{
           .s-formgroup {
              & &.popover {
                  left: 120px;
              }
            }
     }
}

JS

 w = $(window).width(); 
 if (w < 320){
    $('.s-formgroup').parents('.popover').css('background-color', 'red');
 }

检查弹出框的代码（press12）

<div class="popover fade right in" style="top: -41.5px; left: 16px; display: block;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p>
                                            <div class="form-group s-formgroup">
                                            <div class="age-grp1 pull-left">
                                                <label for="kid19">UNDER 19 YEARS</label>
                                                <input type="text" class="pull-left numbersOnlyField" maxlength="2" value="" id="kid19">
                                            </div>
                                            <div class="age-grp2 pull-right">
                                                <label for="kid26">19-26 YEARS</label>
                                                <input type="text" class="pull-left numbersOnlyField" maxlength="2" value="" id="kid26">
                                            </div>
                                            <div class="row-fluid">                                           
                                                <button class="btn btn-default btn-block btn-lg" id="kids" type="button">ok</button>
                                            </div>
                                        </div>
                                    </p></div></div></div>

Answer 1

要使用 LESS 执行此操作，您应该有一个您要设置样式的元素的唯一父级。 （如@seven-phases-max 所述）

在您的小提琴中，您将使用 2.0.1 版本的 javascript 插件和最新 3.0.3 版本的 CSS。那么您将使用哪个版本的 Bootstrap？ Twitter 的 Bootstrap v2 和 v3 之间会有重大变化，另见Updating Bootstrap to version 3 - what do I have to do?

根据您提供的 HTML，@JotaBe 的 jQuery 解决方案没有任何问题。这里的问题是您的 div.popover 将动态生成。所以 div.popover 在文档就绪时不存在。

您将通过在创建弹出窗口后添加样式来找到解决方案。 TB 2.0.1 的弹出框（或工具提示）插件。不会触发事件。您必须通过点击链接.popover-markup>.trigger 并在弹出框显示后应用您的样式：

$('.popover-markup>.trigger').click(function()
{
$(this).popover({

    html: true,
    placement: 'right',
    manual: 'manual',
    content: function () {
        return $(this).parent().find('.content').html();
    }

});
$(this).popover('show');
$('.s-formgroup').closest('.popover').css('background-color', 'red');

});

这也适用于您的小提琴：http://jsfiddle.net/2XmVC/1/

这也适用于版本 2.3.2 和 >= 3.0.0，另请参阅：Twitter Bootstrap .on('show',function(){}); not working for popover

Answer 2

如果您可以通过类型、ID 或任何其他 jquery seelctor 识别 DOM 树中的祖先，则可以使用 .closest() 查找所需的元素。

您可以致电.closest('.popover')

Closest 沿着 DOM 树向上爬，直到找到与提供的选择器匹配的内容。

您也可以使用.parent().parent()，但另一种方式是最安全的（如果您对 HTML 进行更改，它将继续工作）。

注意：parents() 上升到所有 DOM 树。 closest() 在选择器匹配的第一个祖先处停止。因此，在您的代码中，将您的 parents() 转换为 closest() 即可。