0

这与我之前的问题Twitter Bootstrap 手风琴功能有关

我想知道.find()作品 - 它是在指定范围内寻找一个 div 类，还是在整个页面上寻找它？

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

在上面的代码中 - 我必须单击手风琴标题中的链接，以便我可以打开包含手风琴内部的手风琴主体（不在手风琴标题 div 中）。如果手风琴内部 div 中的 div 元素为空 - 那么它应该将文本添加到元素 div“无项目”

页面中的 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>
4

3 回答 3

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');
    }
});

Thus your javascript should be included like this:

<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>
于 2013-08-19T14:17:59.363 回答
0

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

.accordion-heading .accordion-inner no_border

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

于 2013-08-19T14:16:02.653 回答
0

它适用于所有.accordion-inner no_border内部according-heading.

$(this).find('.accordion-inner','.no_border');
于 2013-08-19T14:16:36.723 回答