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

【问题标题】：adding text to empty div with twitter bootstrap使用 twitter bootstrap 将文本添加到空 div
【发布时间】：2013-08-21 09:05:31
【问题描述】：

这和我之前的问题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 中）。如果手风琴内部 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>

【问题讨论】：

我建议将您的代码包装在 `$(document).ready(function() { code here });

标签： javascript twitter-bootstrap

【解决方案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>

【讨论】：

这似乎完全正确，但我不确定为什么它不起作用:(我在视图页面中有这段 js 进行测试
我更新了我的帖子，包括我如何将 javascript 添加到脚本标签中的页面
@Masriyah 我稍微更改了代码。没有将 .element div 用于计算，我忘记在 if 语句中删除内部前面的 $。上面的代码应该可以工作。
有没有办法可以在控制台中调试，看看它是否命中了这个脚本？我仍然没有看到我需要看到的东西
取决于您的浏览器。但是大多数现代浏览器都支持使用console.log()

【解决方案2】：

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

.accordion-heading .accordion-inner no_border

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

【讨论】：

【解决方案3】：

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

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

【讨论】：