2013-01-18 72 views
0

我試圖動態地填充JQM手風琴/摺疊套件的內容。我看過http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH20.php,但這些例子似乎已經過時了。所以,我試圖想出一個工作的例子,但我目前卡住,不能看,爲什麼這不應該工作:Jquery Mobile,可摺疊套件和兒童

<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的FreeBSD的調試代碼,我可以看到,$(this)似乎是一樣$(this).next()(至少他們有相同的值的innerHTML等)

謝謝爲你的幫助!

回答

0

所以,擺弄一下後,我想出了foll由於黑客/解決方法:

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