jQuery mobile structure of html

Question

I wounder if it's bad practice to step out from jquery mobile fundamental structure. In my example I got exact the same code. But in the other one I added a div before the -tag. That gives me another look, cause the css isn't right. Is it bad? It breaks my good looking list. And are there any good solution of it?

Reason is because I want some control of the info in my list, to show and hide the div with som jQuery. I'll solve this easy to give the li -tag a class and hide and show that instead. But im a bit confused abouth it anyway

If I have this code (take from jquery demo page):

                    <li>
                        <a href="#">
                            <h2>
                                Stephen Weber</h2>
                            <p>
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                        <p class="ui-li-aside">
                            <strong>6:24</strong>PM</p>
                </li>

It will generate this html:

                    <li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" data-corners="false"
                    data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false"
                    data-iconpos="right" data-theme="c">
                    <div class="ui-btn-inner ui-li">
                        <div class="ui-btn-text">
                            <p class="ui-li-aside ui-li-desc">
                                <strong>6:24</strong> PM
                            </p>
                            <a class="ui-link-inherit" href="#">
                                <h2 class="ui-li-heading">
                                    Stephen Weber</h2>
                                <p class="ui-li-desc">
                                    <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong>
                                </p>
                                <p class="ui-li-desc">
                                    Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                    jQuery team.</p>
                            </a>
                        </div>
                    </div>
                </li>

But if I add a div in my code like this:

                    <li>
                    **<div>**
                        <a href="#">
                            <h2>
                                Stephen Weber</h2>
                            <p>
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                        <p class="ui-li-aside">
                            <strong>6:24</strong>PM</p>
                    </div>
                </li>

It will generate this html:

                <li class="ui-li ui-li-static ui-btn-up-c">
                    <div>
                        <p class="ui-li-aside ui-li-desc">
                            <strong>6:24</strong> PM
                        </p>
                        <a class="ui-link" href="#">
                            <h2 class="ui-li-heading">
                                Stephen Weber</h2>
                            <p class="ui-li-desc">
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong>
                            </p>
                            <p class="ui-li-desc">
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                    </div>
                </li>

Answer 1

jQuery Mobile already have a solution for listview elements toggling. So no need to wrap li elements with parent div.

Here's a solution for you: http://jsfiddle.net/Gajotres/TvwnQ/

$(document).on('pagebeforeshow', '#index', function(){    
    // Hide first listview element
    $('#mylist li').eq(0).addClass('ui-screen-hidden');    
});

Basically you just need to toggle class ui-screen-hidden on listview li element.