Javascript 正在检查div.contents（）是否存在另一个div

我有一个javascript，它允许选择多个选项。html的一个示例如下：

选择一个选项：

<br><br>

<div id="dialogue_container"> </div>
<div id="Append"> And then this happens.</div>          

<div class="inlinechoice-0" id="0">
    <a class="question" id="1">Choice 1</a><br>
    <a class="question" id="2">Choice 2</a><br>
    <a class="question" id="3">Choice 3</a>
</div>

<div class="answer-1">
    You picked 1.  
    <div class="inlinechoice-1" id="1">
        <a class="question" id="4">Choice 4</a><br>
        <a class="question" id="5">Choice 5</a><br>
    </div>
</div>
<div class="answer-2">
    You picked 2. 
</div>
<div class="answer-3">
    You picked 3. 
</div>
<div class="answer-4">
    You picked 4. 
    <div class="inlinechoice-2" id="2">
        <a class="question" id="6">Choice 6</a><br>
        <a class="question" id="2">Choice 7 (2)</a><br>
    </div>
</div>
<div class="answer-5">
    You picked 5. 
</div>
<div class="answer-6">
    You picked 6. 
</div>
<br><br>

<FORM>
    <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>

然后是一点CSS：

div[class*='inlinechoice-'] { cursor: pointer; }

div[class*='answer-'] {display:none}

div[class*='append']{display:none}

它的工作方式是所有inlinechoice/answerclass/append类都以隐藏开始。当用户单击选项时，javascript会按照选择的顺序将适当的答案放入对话容器div中。但是，我想添加最后一点，即在用户没有更多选择时显示append div的内容。我需要检查对话容器的内容，看看是否有任何活动的inlinechoices（即非隐藏的），如果没有，那么我可以将append div设置为显示。我认为解决方案将类似于建议，但我不确定如何将其应用于对话容器的内容，因为它们是动态的

谢谢

代码笔

编辑：新代码笔。我已经在第一个问题onclick事件中添加了以下代码，它正确地附加到没有嵌套选项（即选项2和3）的选项中，但没有选项1（有附加问题）。我认为，与其搜索“对话”容器的全部内容，不如只查看最后一个“选择”答案的内容，然而，事实证明这有点棘手

    $foo = $("#dialogue_container").append($('.answer-' + $id).contents());

            $str = $foo.html();

            $term = "question";
            $index = $str.indexOf($term);
            if($index != -1){
            //Do Nothing
            }
            else{
            $('#append').show();
            }

编辑：这有什么特别的原因吗

        $foo = $("#dialogue_container").append($('.answer-' + $id).contents());

但这不是吗

        $('.answer-' + $id).contents();

我猜这与将.contents（）与类而不是div结合使用有关，但我不确定如何指示脚本仅返回上次单击的答案类的内容

如果我在中添加以下内容，我可以得到一个警报以返回正确的内容，但我不想像这样硬编码答案id类：

  alert($('[class*="answer-2"]').eq(0).html());

我试过：

  alert($('[class*="answer-"]' + $id).eq(0).html());

尝试选择正确的答案类，但它不会返回任何内容。我觉得我就快到了，但还不完全是这样

---

编辑：多亏了一点澄清，我终于找到了答案！我将在下面添加答案。

在您的中缺少

]

$('div[class*=inlinechoice]').on('click', '.question', function(e) {
    //               -----^-----
    var $this = $(this),
            $id = $this.prop('id');
    $("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice]').on('click', function(a) {
    //               -----^-----
    var $this = $(this),
            $cid = $this.prop('id');
    $('.inlinechoice-' + $cid).hide();
});

---

因此，我调用事物的顺序很重要（你可能会认为我现在已经能够解决类似的问题）

在定义$id变量之后立即将以下内容添加到javascript中似乎已经达到了目的：

    //This is the append code which adds the contents of the append div when there are no more choices.
    $str = $('.answer-' + $id).html();
    $index = $str.indexOf("question");

    if ($index != -1) {
        //Do Nothing
    } else {
    $('#append').show();
    }

---

谢谢，我是否也需要在第一个选项中添加一个选项（在代码的第一行）？@bawpie：哦，很抱歉，我错过了oneNo的担忧，似乎我需要在这两个选项上都添加一个选项，但只是想检查一下（我在这方面很新！）

    //This is the append code which adds the contents of the append div when there are no more choices.
    $str = $('.answer-' + $id).html();
    $index = $str.indexOf("question");

    if ($index != -1) {
        //Do Nothing
    } else {
    $('#append').show();
    }