Question

我正在尝试动态填充JQM手风琴/可折叠集的内容。我看过http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH20.php，但这些例子似乎已经过时了。所以我试图想出一个有效的例子，但我现在卡住了，看不清楚，为什么这不起作用：

<script type="text/javascript">
$(document).ready(function() {
    $(".mySet").bind('expand', function (event, ui) {
        /* This prints e.g. "This is the first entry\n
        I'm the collapsible set content for section 1." */
        console.log($(this).text());

        /* This should print "This is the first entry" (=the innerText of <h3>)
        but it doesn't, it prints "This is the first entry\n
        I'm the collapsible set content for section 1." as well */
        console.log($(this).next().text());

        /* This should just print "I'm the collapsible set content for section 1"
        (=the innerText of <p>) but it doesn't, it prints e.g. "This is the 
        first entry\n I'm the collapsible set content for section 1." as well */
        console.log($(this).nextAll("p").text());
    });
});
</script>

<div data-role="collapsible-set">
    <div data-role="collapsible" class="mySet">
        <h3>This is the first entry</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>
    <div data-role="collapsible" class="mySet">
        <h3>This is the second entry</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

有谁看到，为什么jQuery不会降临$(this)（=指向当前展开的<div ...class="mySet">？如果我在Opera的DragonFly中调试此代码，我可以看到，{{1}似乎与$(this)相同（至少它们对于innerHTML等具有相同的值。）

感谢您的帮助！

Answer 1

所以，在摆弄了一下之后我想出了以下黑客/解决方法：

$(document).ready(function() {
    $(".mySet").bind('expand', function (event, ui) {
        /* I'm just creating a new var "myDiv" which points to my current div (so in a 
        way "myDiv" is just a copy of "this" */
        var myDiv = $("#"+$(this).attr('id'));
        var myP = myDiv.find('p:first');

        // Works as expected, prints "I'm the collapsible set content for section 1."
        console.log(myP.text());
    });
});

Jquery Mobile，可折叠套装和儿童套装

1 个答案: