HTML

Question

我正在尝试使用类“s-formgroup”定位一个div的特定popover，并将其背景设置为RED，因为我有多个弹出窗口。无论是我的js还是我的不那么做的伎俩

HTML

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

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

CSS LESS

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

JS

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

检查弹出窗口的代码（按12）

<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（或工具提示）插件。不会触发事件。您必须通过单击链接.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和＆gt; = 3.0.0，另见：Twitter Bootstrap .on('show',function(){}); not working for popover

Answer 2

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

在您的情况下，您可以致电.closest('.popover')

最靠近DOM树，直到找到与提供的选择器匹配的内容。

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

注意：parents()会上升到所有DOM树。 closest()在选择器匹配的第一个祖先中停止。因此，在您的代码中，将您的parents()转换为closest()，它就能正常运行。

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

HTML

CSS LESS

JS

检查弹出窗口的代码（按12）

2 个答案: