JQuery и JSON получить данные из VAR

Question

У меня есть этот код:

 $.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 раз, я хочу поместить свое содержимое в идентификаторы из JSON, используя var и .text (), но это не работает получить переменную, в данном случае заголовок в текст jquery (), чтобы он мог поместить его в соответствующий 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>

Answer 1

Это должно быть так же просто, как ссылаться на переменную.

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

Answer 2

Вы пробовали это, используя 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;
    });
});

Answer 3

Вы хотите использовать .html (val) .

Редактировать: Фактически, .text (val) поместит текст внутри элемента как есть. Использование .html (val) позволит любому HTML, который вы добавляете, отображаться соответствующим образом.