Значения определенных полей, которые предшествуют определенному классу кнопки onClick, не определены?

Думал проверить что-то подобное, чтобы получить значения полей, которые предшествуют повторяющемуся щелчку UpdateButton, но он регистрирует значения undefined в консоли браузера.

var $prevID = $(this).prevAll('.UpdateStory').first(".storyID");
var $prevStory = $(this).prevAll('.UpdateStory').first(".currentStory");

var id = $prevID.val();
var story = $prevStory.val();

Вот HTML (клиентский + серверный handlebars.js)

<div id="allStories" class="allStories"> </div><!--/allStories-->
<script id="storyTemplate" type="text/x-handlebars-template">

    <div class="thisness">
      <div class="stories">

        <div class="new" id="new">
          \{{#each stories}}
            <div class="container-fluid">
              <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                  <form class="updateNewStoryForm">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                      </span>
                      <input type="hidden" class="storyID" value="\{{ _id }}"/>
                      <input type="text" class="currentStory" value="\{{ story }}">
                      <span class="input-group-addon">
                        <input type="button" class="UpdateStory">
                      </span>
                    </div><!-- /input-group -->
                  </form>
                </div><!-- /.col-lg-6 -->
              </div><!-- /.row -->
            </div><!-- /.container-fluid -->
          \{{/each}}
        </div>

      </div> <!--/stories-->
    </div> <!--/thisness-->

</script>

А вот ajax .put, который иначе только обновляет первую историю

// UpdateStory button clicks
$(".allStories").on('click','.UpdateStory',function(e) {

    e.preventDefault();
    console.log('UpdateStory clicked');

    // story elements for API that work for only the first item,
    // regardless of whichever UpdateStory button is clicked
    var id = $( ".storyID" ).val();
    var story = $( ".currentStory" ).val();

    console.log(id);
    console.log(story);

    var AjaxPostData = {
        id : id,
        story : story
    };

    // if the story field has content
    if (story.length != 0) {
      console.log('there is a story: ' + story);
        // make an ajax call
        $.ajax({
        dataType: 'json',
        data: AjaxPostData,
        type: 'put',
            url:"http://localhost:4200/api/v1/stories/" + id,
            success: refreshNewStories,
            error: foundAllNewFailure
        });
    };

}); // UPDATE

person StackThis    schedule 04.06.2014    source источник
comment
.prev() делает не то, что вы думаете. .storyID не является элементом перед .UpdateStory.   -  person Barmar    schedule 05.06.2014
comment
Используйте .prevAll(), как в решениях здесь: title="поиск ближайшего предыдущего элемента с определенным атрибутом данных jquery"> stackoverflow.com/questions/19653267/   -  person Barmar    schedule 05.06.2014
comment
@Barmar Это имеет смысл, спасибо .. Хотя это все еще ведение журнала undefined .. Есть другие предложения?   -  person StackThis    schedule 05.06.2014
comment
@Barmar обновил пост в соответствии с вашими комментариями..   -  person StackThis    schedule 05.06.2014


Ответы (1)


Так должно быть:

var group = $(this).closest(".input-group-addon");
var id = group.prevAll(".storyID").val();
var story = group.prevAll(".currentStory").val();
person Barmar    schedule 05.06.2014
comment
Идеальный! Очень признателен - person StackThis; 05.06.2014
comment
Каким будет jquery для эквивалента флажка? if (group.prevAll(".archiveCheck").is(":checked")) { var archiveCheck = 'archived';} не работает... для html: <span class="input-group-addon"><input type="checkbox" class="archiveCheck"></span> - person StackThis; 06.06.2014
comment
У вас есть флажок ПОСЛЕ диапазона. prevAll ищет вещи только ДО интервала. - person Barmar; 06.06.2014
comment
Используйте nextAll для присмотра или siblings для движения в обоих направлениях. - person Barmar; 06.06.2014
comment
Очень ценю ваше время с этим .. Почти работает? jsfiddle.net/vG5L8/1 - person StackThis; 06.06.2014
comment
Проверьте консоль JS, она жалуется на синтаксическую ошибку. jsfiddle, кажется, загружает bootsrap.min.css как файл Javascript вместо CSS, потому что у вас был дополнительный символ " в конце URL-адреса. - person Barmar; 06.06.2014
comment
Я исправил это здесь: jsfiddle.net/barmar/vG5L8/2, но он по-прежнему получает ошибка, потому что вы никогда не устанавливали переменную group. - person Barmar; 06.06.2014
comment
И prevAll("checkboxInput") должно быть prevAll(".checkboxInput"). Это все просто глупые опечатки, вам действительно нужно, чтобы я вычитал для вас? - person Barmar; 06.06.2014
comment
Спасибо за это.. В коде была другая логическая ошибка.. Решено. Еще раз большое спасибо за устранение обхода с помощью jquery. - person StackThis; 06.06.2014