jquery和json从var中提取数据

时间:2009-07-10 16:24:05

标签: php jquery json

我有这段代码:

 $.getJSON("Featured/getEvents",
                function(data){
              $.each(data.events, function(i,event){
                    var title = event.title.substr(0,20);
                    $("#title-"+i).text("Text");
                        if ( i == 4 ) return false;
                  });
                });

我正在使用php循环来渲染div 5次,我想使用var和.text()将我的内容放入JSON的ID中,但它不起作用,我该怎么办得到一个var,在这种情况下title是jquery text()所以它可以把它放在相应的div中吗?

这是连接到的相应的php(部分):

<?php for($i = 0; $i <= 4; $i++)
    { ?>

    <div id="event-item-<?= $i?>" class="event">
        <div class="column-left">
        <div class="title"><h3><a href="" id="title-<?= $i?>"></a></h3></div>

这是渲染版本:

<div id="event-item-0" class="event">
   <div class="column-left">
        <div class="title"><h3><a href="" id="title-0"></a></h3></div>
             <div class="inner-left">
                <img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
                <p class="author">Posted by: <br> <a href="#">Brendan M. (22 Events)</a></p>
            </div>
            <div class="inner-middle">
            <p class="description" id="description-0"></p>

            <p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
            <p class="links">
            <!-- AddThis Button BEGIN -->
            <a href="http://www.addthis.com/bookmark.php?v=250&amp;pub=philly2night" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"></script>
            <!-- AddThis Button END -->
            <a href="#" class="button">View Event</a></p>
            </div>
        </div>


        <div class="column-right">
            <ul id="event-options">
                <li class="total-attending"><span><a href="#">502</a>Attending</span></li>
                <li class="rsvp"><span><a href="#">RSVP</a></span></li>
                <li id="like" class="notlike"><span>(3) Likes <br><span class="message"><a href="javascript:;" class="likeon">Do You Like it?</a></span></span></li>
                <li class="comment"><span><a href="#">Comments (200)</a></span></li>

                <li class="location"><span><a href="#">Location Name</a></span></li>
            </ul>
            </div>
        </div>

        ...     
</div>

3 个答案:

答案 0 :(得分:4)

它应该像引用变量一样简单。

$("#title-"+i).text( title );

或者,如果您的标题包含标记,

$("#title-"+i).html( title );

如果这不起作用,请确保您没有收到任何阻止代码运行的JavaScript错误。

编辑:这可能相关也可能不相关,但我会避免将事件用作变量名。太容易与window.event对象混淆,它可能会导致其他问题。一般来说,在这种情况下我会使用evt。

其他可能性:在文档加载完成后,您没有运行getJSON方法,或者该方法与当前页面无关。如果简单的事情似乎没有让你到任何地方,你可以尝试使用Firefox / Firebug逐步完成代码,看看它在做什么。我标记的简单示例只是使用jQuery来设置锚的文本工作正常,所以我认为问题不在于设置文本的代码中。

$(function() {
    $.getJSON("/Featured/getEvents",
            function(data){
                 $.each(data.events, function(i,evt){
                    var title = evt.title.substr(0,20);
                    $("#title-"+i).text(title);
                    if ( i == 4 ) return false;
                 });
            });
});

答案 1 :(得分:0)

您想使用.html(val)

编辑:实际上,.text(val)会将文本放在元素中。使用.html(val)会让您正在添加的任何HTML都正确呈现。

答案 2 :(得分:0)

您是否尝试使用title代替"Text"

$.getJSON("Featured/getEvents", function(data){
    $.each(data.events, function(i,event){
        var title = event.title.substr(0,20);
        $("#title-"+i).text(title);
        if ( i == 4 ) return false;
    });
});