JQuery пересекает дом: не найти правильное местоположение

Question

JQuery пересекает дом: не найти правильное местоположение

0

Я использую JQuery, чтобы скрыть и показать div, когда пользователь нажимает кнопку. Однако кнопка находится в другом div. Я должен пройти по дереву, и я думал, что сделал это правильно, но я все время получаю сообщение об ошибке. Uncaught TypeError: undefined is not a function. Проблема в том, что я мог бы использовать...

$( "button.add" ).click(function() {
    $('.more-reports').toggle( "slow" );
  });

Проблема с вышесказанным заключается в том, что это проходит через цикл, который создает несколько экземпляров этих div. Поэтому использование этого, работает, но откроет все экземпляры. См. Мои настройки ниже (это также не работает.

Вот моя страница...

%section.report-library
  .container
    %br
    - @attachments_by_type.each do |type, attachments|
      - recent_attachment = attachments.shift
        %article.report-container
          .report
            %ul.inline
              %li
                %h3= type
                %dl
                  %dd
                    Uploaded By
                    %span= recent_attachment.recruiter_name
                  %dd
                    &#8226;
                  %dd
                    = recent_attachment.created_at.strftime("%D %r")
                  %dd
                    &#8226;
                  %dd
                    %button.add#button View previous attachments(This is the button)
                %p 
                  = recent_attachment.description    
              %li
                %a.btn.primary{:href => "#{recent_attachment.url}"} Download      
          .more-reports{:style => "display: none"}(This is the div I am hiding and showing)
            - attachments.each do |attachment|
                %dl
                  %dd
                    Uploaded By
                    %span=attachment.recruiter_name
                  %dd
                    =attachment.created_at.strftime("%D %r")
                  %dd
                    %a{:href => "#{attachment.url}"} Download

Вот мой JQuery

$( "button.add" ).click(function() {
    $(this).parentsUntil('article.report-container').next('.more-reports').toggle( "slow" );
  });

Я даже попробовал.parent(). Parent(). Parent(). Parent() с разными количествами.parent(). Ни один из них, похоже, не работает.

сгенерированный html

<section class='report-library'>
      <div class='container'>
        <br>
        <article class='report-container'>
          <div class='report'>
            <ul class='inline'>
              <li>
                <h3>Type B</h3>
                <dl>
                  <dd>
                    Uploaded By
                    <span>Brad Martin</span>
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    05/22/14 09:24:55 PM
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    <button class='add'>View previous attachments</button>
                  </dd>
                </dl>
                <p>
                  Description
                </p>
              </li>
              <li>
                <a class='btn primary'>Download</a>
              </li>
            </ul>
          </div>
          <div class='more-reports' style='display: none'>
               <dd>(Ignore the indentions here. placed in as dummy text)
                    Uploaded By
                    <span>Brad Martin</span>
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    05/22/14 09:24:55 PM
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    <button class='add'>View previous attachments</button>
                  </dd>
          </div>
        </article>
        <article class='report-container'>
          <div class='report'>
            <ul class='inline'>
              <li>
                <h3>Type A</h3>
                <dl>
                  <dd>
                    Uploaded By
                    <span>Brad Martin</span>
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    05/22/14 08:53:52 PM
                  </dd>
                  <dd>
                    &#8226;
                  </dd>
                  <dd>
                    <button class='add'>View previous attachments</button>
                  </dd>
                </dl>
                <p>
                  Description
                </p>
              </li>
              <li>
                <a class='btn primary>Download</a>
              </li>
            </ul>
          </div>
          <div class='more-reports' style='display: none'>
          </div>
        </article>
      </div>
    </section>

Taylor Mitchell 23 май 2014, в 05:17

Источник

1

Можете ли вы поделиться сгенерированным HTML - также он должен быть closest('.report-container') или closest('.report') вместо .parentsUntil() (вы пропустили s )
Arun P Johny 23 май 2014, в 02:41
1

Это должны быть parentsUntil до тех parentUntil parentsUntil не будут parentsUntil parentUntil . Также next вызов ничего не найдет в этом случае, потому что article.report-container не имеет ни одного родного брата. .more-reports - это брат .report , не так ли?
vee 23 май 2014, в 02:45
0

HTML работает, и у меня есть родители в моем приложении, я просто почему-то скопировал его без него.
Taylor Mitchell 23 май 2014, в 03:41
0

$( "button.add" ).click(function() { $(this).parentsUntil('.report').next('.more-reports').toggle( "slow" ); }); все еще получает Uncaught TypeError: undefined is not a function
Taylor Mitchell 23 май 2014, в 03:44

Показать ещё 2 комментария

Теги:

jquery

ruby-on-rails

css

1 ответ

Ещё вопросы

Можете ли вы поделиться сгенерированным HTML - также он должен быть closest('.report-container') или closest('.report') вместо .parentsUntil() (вы пропустили s )
Это должны быть parentsUntil до тех parentUntil parentsUntil не будут parentsUntil parentUntil . Также next вызов ничего не найдет в этом случае, потому что article.report-container не имеет ни одного родного брата. .more-reports - это брат .report , не так ли?
HTML работает, и у меня есть родители в моем приложении, я просто почему-то скопировал его без него.
$( "button.add" ).click(function() { $(this).parentsUntil('.report').next('.more-reports').toggle( "slow" ); }); все еще получает Uncaught TypeError: undefined is not a function

PeterKA · Accepted Answer · 2014-05-23T02-03-00.000Z

Вот как вы можете это сделать; поскольку .more-reports - дочерний .report-container вы можете .report-container в .report-container с помощью .closest(). parentsUntil() будет соответствовать нескольким родителям и может оказаться parentsUntil(). .children() гарантирует, что вы идете на один уровень - не дальше.

$(function() {
    $( "button.add" ).click( function() {
        $(this).closest( '.report-container' ).children('.more-reports').toggle( "slow" );
    });
});

Ах, хорошо, я думал, что ближайший только движется вниз по дому. И я не уверен, почему я не думал об использовании детей. Полагаю, уже очень поздно. Спасибо вам большое!