Question

这与我之前的问题Twitter Bootstrap accordion feature

有关

我想知道.find()的工作原理 - 它是否在指定范围内寻找一个div类，或者它是否在整个页面中查找它？

$('.accordion-heading').on('click', function () {
            var $inner = $(this).find('.accordion-inner no_border');
            if (!$.trim($inner.html())) {
                $inner.html('No items');
            }
        });

在上面的代码中 - 我必须点击手风琴标题中的链接，这样我才能打开手风琴主体（不是手风琴标题div），其中包含手风琴内部。如果accordion-inner div中的div元素为空 - 那么它应该将元素添加到元素div“no items”

页面中的Javascript：这是我将javascript添加到视图页面的方式，以便我可以看到脚本是如何工作的。

<script type="text/javascript">
        $(function () {
            $.views.AllItems.Init();
        });

        $('.accordion-heading').on('click', function () {
        var inner = $(this).siblings('.accordion-body').find('.accordion-inner .element');

        if ($.trim(inner.html()).length == 0) {
            inner.html('No items');
        }
    });
    </script>

Answer 1

鉴于您的HTML看起来像这样：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
              Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <div class="element">blach blah blah</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner"></div>
        </div>
    </div>
</div>

然后，为了使用“accordion-inner”类来定位div，您必须使用.siblings('.accordion-inner')，因为.find()会查找后代。

.siblings()获取元素的兄弟（同一级别的元素）。

更新：忘记了在找到兄弟姐妹后你需要.find()。

因此，例子是：

$('.accordion-heading').on('click', function () {
    var inner = $(this).siblings('.accordion-body').find('.accordion-inner');

    if ($.trim(inner.html()).length == 0) {
        inner.html('No items');
    }
});

因此，您的javascript应该包含在内：

<script type="text/javascript">
    $(document).ready(function() {
        $(function () {
            $.views.AllItems.Init();
        });

        $('.accordion-heading').on('click', function () {
            var inner = $(this).siblings('.accordion-body').find('.accordion-inner');

            if ($.trim(inner.html()).length == 0) {
                inner.html('No items');
            }
        });
    });
</script>

Answer 2

JQuery find将搜索给定jquery中包含的后代，在这种情况下，$(this)是一个包含1个元素的JQuery对象 - 单击的.accordion-heading。因此，匹配的元素将是也将被css选择器匹配的元素

.accordion-heading .accordion-inner no_border

当然，这不起作用，因为它在<no_border></no_border>类的元素中搜索accordion-inner元素。也许你的意思是.no_border

Answer 3

它适用于.accordion-inner no_border

内的所有according-heading.

$(this).find('.accordion-inner','.no_border');

使用twitter bootstrap将文本添加到空div

3 个答案: