Checking div.contents() for presence of another div

Question

I have a piece of javascript which allows for the selection of multiple choices. An example of the html is this:

Pick an option:

<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>

Then I have some javascript here:

$('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();

});

And then a little bit of CSS here:

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

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

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

The way it works is that all of the inlinechoice/answerclass/append class begin as hidden. As the user clicks the options, the javascript puts the appropriate answers into the dialogue_container div in the order that they are selected. However, I would like to add a final touch, and that is to show the contents of the append div once there are no more choices available to the user. I need to check the contents of the dialogue_container to see if there are any active inlinechoices(i.e. non hidden ones), and if there are none, then I can set the append div to be shown. I'm thinking the solution will be something like suggested here, but I'm not sure how to apply this to the contents of the dialogue container, as they are dynamic.

Thanks.

Codepen here

Edit: New Codepen here. I've added the following code to the first question onclick event and it's appending correctly to choices which have no nested choices (i.e. choices 2 and 3) in them, but not choice 1 (which has additional questions). I think rather than searching the entire contents of #dialogue_container, I need to just look at the contents of the last select #answer, however, this is proving a bit tricky.

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

            $str = $foo.html();

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

Edit: Is there a particular reason why this works:

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

But this doesn't?

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

I'm guessing it's something to do with using .contents() combined with a class rather than a div, but I'm not sure how to instruct the script to return just the contents of the last clicked answer class.

If I add the following in, I can get an alert to return the correct contents, but I don't want to hardcode the answer-id class like this:

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

I've tried:

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

To try and pick up the correct answer class, but it doesn't return anything. I feel like I'm nearly there on this, but not quite!

Edit: Thanks to a little clarification here, I finally managed to figure this out! I'll add the answer below.

Pranav C Balan · Answer 1 · 2014-02-28T13:15:54.523

1

Missing ] in your attribute selector

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

CODEPEN

edited Feb 28 '14 at 13:15

answered Feb 28 '14 at 12:43

Pranav C Balan

106,305
21
136
157

Thanks, would I need to add one to the first choice as well (in the first line of the code)? – bawpie Feb 28 '14 at 13:14
@bawpie : oh sorry I just missed that one – Pranav C Balan Feb 28 '14 at 13:16
No worries, it seemed sensible that I'd need to do them on both but just wanted to check (I'm very new at this!) – bawpie Feb 28 '14 at 13:25

score 0 · Accepted Answer · answered Mar 01 '14 at 08:08

So it turns out that the order in which I called things mattered (you'd think I'd be able to figure something like this out by now).

Adding the following into the javascript right after $id variable has been defined seems to have done the trick:

    //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();
    }

Codepen

Checking div.contents() for presence of another div

2 Answers2