无法让 .siblings() 在 jQuery 中工作

Question

我的站点上有一个表单，允许人们创建一个包含部分的文档，每个部分都包含步骤。基本上，问题是我可以很好地创建部分，但由于某种原因没有创建步骤。

每个 Section 和每个 Step 的 HTML 都是使用下划线模板创建的，您可以在下面的两个脚本中看到：

<script id="tmpl-section" type="text/html">

    <div class="section">
        <div class="form-group row">
            // inputs
        </div>

        <div class="form-group row">
            // more inputs
        </div>

        <a href="#" onclick="addSection($(this), true)">
            Add section after 
        </a>

        <a href="#" onclick="addSection($(this), false)">
            Add section before
        </a>

        <h5>Steps</h5>
        <div class="step-body"></div>

        <hr />
    </div>
</script>

<script id="tmpl-step" type="text/html">
    <div class="step">
        <div class="form-group row">
            // inputs
        </div>

        <div class="form-group row">
            // inputs
        </div>
    </div>
</script>

当有人点击"Add section (before or after)"时，会调用以下函数：

function addSection(element, after) {
    var sectionStructure = _.template($('#tmpl-section').html()),
        $sectionBody = $('.section-body');

    if ($('.section').length) {
        if (after) {
            element.closest('.section').after(sectionStructure);
        } else {
            element.closest('.section').before(sectionStructure);
        }
    } else {
        $sectionBody.append(sectionStructure);
    }
    addStep($(this), true); // '$(this)' should refer to whichever "add section" link was clicked
}

（$sectionBody 指的是页面中包含所有部分的部分。）基本上，它是在页面首次加载时检查页面上是否还有其他部分，并且如果没有，则添加一个。如果还有其他部分，它会在单击任何部分之前或之后添加另一个部分。不太相关，但我想解释其中的 if 语句。

每次调用 addSection() 时，它还会调用另一个名为 addStep() 的函数，以一步初始化每个新部分。

function addStep(element, after) { 
    var stepStructure = _.template($('#tmpl-step').html()),
        $thisStepBody = element.siblings('.step-body');

    $thisStepBody.append(stepStructure);
}

最终我会在每个步骤中添加一个 link 以添加另一个步骤 before/after 就像每个部分都有的那样，但我还没有那么远。

问题是，$thisStepBody.append(stepStructure); 没有做任何事情。我的猜测是 $thisStepBody.siblings('.step-body')，它应该指向被单击的任何部分内的 ('.step-body')，这就是问题所在。我已经尝试了很多不同的方法，但我不知道为什么它不起作用。

看起来这应该是一件简单的事情，但我担心我正在尝试做的其他事情过于复杂，以致于以我什至无法想到的方式搞砸了.

Answer 1

addStep($(this), true);

应该是

addStep(element, true);

addSection() 函数未绑定到单击的元素，该元素作为参数传递。

无法让 .siblings() 在 jQuery 中工作

Having trouble getting .siblings() to work in jQuery

html

javascript

jquery

siblings

underscore.js