Question

我正在使用引导标签，直接位于<body>下方和.modal内。我需要通过.modal选择不在css内的标签。但这不起作用：

var act = $("div:not(.modal) ul.nav li";

在忽略.modal内容的情况下，它还会选择.modal内的标签。这是一个已知的限制吗，这是可以实现的吗？有没有解决方法呢？

<body>
    <div>
        ...
        <!--  More nested on actual code-->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="#" data-toggle="tab">Tab 2</a>
            </li>
        </ul>
    </div>
    ...
    <div class="modal fade lookup" id="search-adjustment-report-header-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    ...
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#" data-toggle="tab">Tab 1</a>
                        </li>
                        <li role="presentation">
                            <a href="#" data-toggle="tab">Tab 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

我实际上需要此查询来设置一些cookie，选择默认选项卡等

Answer 1

@post.skills = @post.skills.map(:&to_i)

工作正常：https://jsfiddle.net/ue6jqp23/1/

Answer 2

在javascript中，我想我会接近这样的事情：

识别所选标签：

var tabs = document.querySelectorAll('.nav-tabs li');

for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.add('selected-tab');
    var tabAncestor = tabs[i].parentNode;

    while (tabAncestor.nodeName !== 'BODY') {
        if (tabAncestor.classList.contains('modal')) {
            tabs[i].classList.remove('selected-tab');
        }
        tabAncestor = tabAncestor.parentNode;
    }
}

然后您只需收集Node List：

var selectedTabs = document.getElementsByClassName('selected-tab');

示例：

var tabs = document.querySelectorAll('.nav-tabs li'); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.add('selected-tab'); var tabAncestor = tabs[i].parentNode; while (tabAncestor.nodeName !== 'BODY') { if (tabAncestor.classList.contains('modal')) { tabs[i].classList.remove('selected-tab'); } tabAncestor = tabAncestor.parentNode; } }

.selected-tab a, span { color: rgb(255,0,0); }

<div> <p>The tabs with <em>.selected-tab</em> class are indicated in <span>red</span>.</p>  <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#" data-toggle="tab">Tab 2</a> </li> </ul> </div> ... <div class="modal fade lookup" id="search-adjustment-report-header-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> ... <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#" data-toggle="tab">Tab 2</a> </li> </ul> </div> </div> </div> </div>

在css伪类选择器下选择子项

2 个答案: