Kann nicht nach Element durch Attribut scrollen

Question

Ich habe ein Suchformular, das Wörter innerhalb eines UL LI Elements sucht. wenn es ein Ergebnis gibt - ich möchte, dass es durch die Attributposition des Ergebnisses gescrollt wird (Datenziel).

Ich kann nicht die Position des LI durch sein Attribut erhalten, und dafür - kann nicht zu ihm navigieren.

ich "Can not Eigenschaft 'top' undefinierter lesen", wenn ich versuche, die Position der Element_ID Variable zu erhalten:

$(".faq_cont_right .scroll ul li").each(function() { 
    if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     var element_id = $(".faq_cont_right .scroll ul li").filter('[data-target="#item1"]'); 
     $('.scroll').animate({ 
      scrollTop: $(element_id).position().top - 500, 
     }, 200); 
    } else { 
     $(this).show(); 
     $(this).trigger('click'); 
     var element_id = $(this).attr('data-target'); 
     var scroller = $('.scroll').offset().top; 
     console.log($(element_id).offset().top); // error 

     $('.scroll').animate({ 
      scrollTop: $(element_id).offset().top - scroller, 
     }, 200); 
    } 
}); 

/** 
 
* Created by Roy Barak on 22-Oct-17. 
 
*/ 
 
$(document).ready(function() { 
 

 
    $('.questions_header').text($(".active_search").text()); 
 

 
    $('.question_div').on('shown.bs.tab', function() { 
 

 

 
    $('.questions_header').text($(this).text()); 
 

 

 
    }); 
 

 
    $('#faq_chat_btn').on('click', function() { 
 

 
    $(this).toggleClass('faq_chat_off faq_chat_on'); 
 
    if ($(this).hasClass("faq_chat_off")) { 
 
     $('.faq_chat_header_left p').text('fermé'); 
 
     $('.faq_chat_middle').hide(); 
 
    } 
 
    if ($(this).hasClass("faq_chat_on")) { 
 

 
     $('.faq_chat_header_left p').text('ouvert'); 
 
     $('.faq_chat_middle').show(); 
 
    } 
 

 

 
    }); 
 

 

 
    $('#faq_search').bind('keydown', 'keyup', function(event) { 
 
    if (event.keyCode == 13) { 
 
     event.preventDefault(); 
 

 
    } 
 

 

 
    var filter = $(this).val(); 
 

 
    if (filter.length && filter !== null && filter !== '') { 
 

 
     $(".faq_cont_right .scroll ul li").each(function() { 
 

 

 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 

 
      var element_id = $(".faq_cont_right .scroll ul li").filter('[data-target="#item1"]'); 
 

 
      $('.scroll').animate({ 
 
      scrollTop: $(element_id).position().top - 500, 
 
      }, 200); 
 

 
     } else { 
 

 
      $(this).show(); 
 

 
      $(this).trigger('click'); 
 
      var element_id = $(this).attr('data-target'); 
 
      var scroller = $('.scroll').offset().top; 
 

 
      console.log($(element_id).offset().top); 
 

 
      $('.scroll').animate({ 
 
      scrollTop: $(element_id).offset().top - scroller, 
 
      }, 200); 
 

 

 

 
     } 
 
     }); 
 
     $(".tab-content>.active").each(function() { 
 

 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 

 
      $(this).show(); 
 

 
     } else { 
 

 
      $(this).show(); 
 

 
     } 
 
     }); 
 

 
    } 
 

 
    }); 
 

 
    $(".faq_cont_right .scroll ul li").on('click', function(e) { 
 

 
    $(".faq_cont_right .scroll ul li").removeClass('active_search'); 
 
    $(this).toggleClass('active_search'); 
 

 
    e.preventDefault(); 
 

 
    }); 
 
});

/* Styles go here */ 
 

 
#faq_page .page_container { 
 
    height: 100vh; 
 
} 
 

 
.faq_cont_right { 
 
    float: left; 
 
    width: 33.33333333%; 
 
} 
 

 
.scroll { 
 
    width: 100%; 
 
    height: 88vh; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
.faq_cont_left .tab-content { 
 
    padding: 15px!important; 
 
} 
 

 
.faq_tab_content { 
 
    height: 88%; 
 
} 
 

 
.faq_question_header { 
 
    padding: 15px; 
 
    height: 12%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.faq_question_header p { 
 
    margin: 0!important; 
 
} 
 

 
.questions_header { 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #5d3c95; 
 
    font-size: 1rem; 
 
    text-transform: uppercase; 
 
} 
 

 
.answer_content { 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #48484a; 
 
    font-size: 1rem; 
 
} 
 

 
.search_bar { 
 
    background-color: #fff; 
 
    border-right: 2px solid #e9e9e9; 
 
    border-left: 2px solid #e9e9e9; 
 
    height: 12vh; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 10px 0 20px; 
 
} 
 

 
.faq_search_form input { 
 
    margin-left: 10px; 
 
    outline: none; 
 
    border: none; 
 
    font-size: 11px; 
 
} 
 

 
form.faq_search_form { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
input.input_search::-webkit-input-placeholder { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 12px; 
 
    color: #767678; 
 
} 
 

 
input.input_search::-moz-placeholder { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 12px; 
 
    color: #767678; 
 
} 
 

 
input.input_search:-ms-input-placeholder { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 12px; 
 
    color: #767678; 
 
} 
 

 
input.input_search { 
 
    padding: 0 !important; 
 
} 
 

 
form.faq_search_form i:before { 
 
    content: "\f002"; 
 
    font-size: 2vw; 
 
    font-family: FontAwesome; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    color: #767678; 
 
} 
 

 
.faq_cont_left { 
 
    height: 100vh; 
 
    background-color: white; 
 
    float: left; 
 
    width: 66.66666667%; 
 
} 
 

 
.faq_questions { 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
    margin-top: 0 !important; 
 
    margin-bottom: 0px !important; 
 
} 
 

 
.faq_questions li:hover { 
 
    font-weight: 600; 
 
} 
 

 
.question_div { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 11px; 
 
    background-color: #e9e9e9; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 80px; 
 
    justify-content: center; 
 
} 
 

 
.questions_border { 
 
    height: 100%; 
 
    border-bottom: 0.5px solid white; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 70%; 
 
} 
 

 
.questions_cont p { 
 
    margin: 0; 
 
} 
 

 
.questions_cont { 
 
    /*padding-left: 22px;*/ 
 
    /*padding-right: 55px;*/ 
 
} 
 

 
.question_div { 
 
    position: relative; 
 
    z-index: 10000; 
 
} 
 

 
.active_search { 
 
    font-weight: 600; 
 
    background-color: #5d3c95; 
 
    color: white; 
 
} 
 

 
.scroll::-webkit-scrollbar-track { 
 
    background-color: #F5F5F5; 
 
} 
 

 
.scroll::-webkit-scrollbar { 
 
    width: 7px; 
 
    background-color: #d8d8d8; 
 
} 
 

 
.scroll::-webkit-scrollbar-thumb { 
 
    background-color: #bebebe; 
 
    border: none; 
 
} 
 

 

 
/*-------------chat---------------*/ 
 

 
.faq_chat_box { 
 
    width: 66.66666667%; 
 
    background-color: #d3f2f1; 
 
    position: absolute; 
 
    bottom: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    right: 0; 
 
    padding: 20px; 
 
} 
 

 
.faq_chat_box_wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.faq_chat_header { 
 
    padding: 15px 20px 15px 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    background-color: #5d3c95; 
 
    color: #fff; 
 
} 
 

 
.faq_chat_header_right img { 
 
    width: 11%; 
 
} 
 

 
.faq_chat_header_right span { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 1.3rem; 
 
    color: #fff; 
 
    padding: 10px; 
 
    margin: 0 !important; 
 
    font-weight: 300; 
 
} 
 

 
.faq_chat_header_left p { 
 
    font-family: 'Montserrat Semi Bold', sans-serif; 
 
    font-size: 11px; 
 
    color: #fff; 
 
    padding: 10px; 
 
    margin: 0 !important; 
 
} 
 

 
.faq_chat_middle { 
 
    width: 100%; 
 
    background-color: #fff; 
 
    padding: 10px; 
 
} 
 

 
.chat_text { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 1.3rem; 
 
    color: #48484a; 
 
} 
 

 
.chat_parme_text { 
 
    margin-bottom: 15px; 
 
} 
 

 
.chat_parme_text_header { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 1.3rem; 
 
    color: #5d3c95; 
 
} 
 

 
.chat_client_text_header { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 1.3rem; 
 
    color: #41c8c2; 
 
} 
 

 
#faq_chat_btn:hover { 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.faq_chat_footer { 
 
    padding: 18px; 
 
    background-color: #41c8c2; 
 
} 
 

 
.faq_chat_middle .scroll { 
 
    height: 20vh; 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
.faq_chat_icon { 
 
    position: relative; 
 
} 
 

 
.faq_chat_header_left { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.faq_chat_status i { 
 
    font-size: 18px; 
 
} 
 

 
.faq_chat_on { 
 
    color: #41c8c2; 
 
} 
 

 
.faq_chat_off { 
 
    color: #ff4444; 
 
} 
 

 
.input-icon { 
 
    position: absolute; 
 
    color: #41c8c2; 
 
    right: 17px; 
 
    font-size: 18px; 
 
    top: calc(50% - 0.5em); 
 
    /* Keep icon in center of input, regardless of the input height */ 
 
} 
 

 
input#faq_chat { 
 
    border-radius: 5px; 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
.input-wrapper { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="faq_cont_right"> 
 
    <div class="search_bar"> 
 
    <form class="faq_search_form"><i></i> 
 
     <input class="form-control input_search" placeholder="Rechercher une question..." name="faq_search" id="faq_search" type="text" autocomplete="off"> 
 
    </form> 
 
    </div> 
 
    <div class="scroll"> 
 
    <ul class="faq_questions"> 
 

 

 

 

 
     <li class="question_div" data-target="#item1" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Les salariés SNCF en activité sont-ils les seuls à pouvoir déposer une demande ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item2" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Mon futur hébergement est pris en charge par mon entreprise. Quelles sont les démarches à effectuer ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item3" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Une famille peut-elle faire une demande de logement ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item4" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Qu'est-ce que le contrat d'occupation ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item5" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Qu'est-ce que le garant physique ou cautionnement ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item6" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Quelles conditions doit remplir mon garant physique ou cautionnaire ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item7" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      How to ask question 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item8" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Terris civitates civitates quam honorem? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item9" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Une famille peut-elle faire une demande de logement ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div" data-target="#item10" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Qu'est-ce que le contrat d'occupation ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 
     <li class="question_div active_search active" data-target="#item11" data-toggle="tab"> 
 
     <div class="questions_border"> 
 
      <div class="questions_cont"> 
 
      Qu'est-ce que le foo ? 
 
      </div> 
 
     </div> 
 
     </li> 
 

 

 

 

 

 
    </ul> 
 
    </div> 
 
</div>

Fiddle

Answer 1

Es sind einige Probleme mit Ihren Selektoren.

First off, element_id wird bei zwei verschiedenen Gelegenheiten im Code:

var element_id = $(".faq_cont_right .scroll ul li").filter('[data-target="#item1"]') 
... 
var element_id = $(this).attr('data-target') 

Die erste gibt ein jQuery-Objekt und das zweite gibt einen String zurück. Dies bedeutet, dass es keinen einheitlichen Weg gibt, element_id zu behandeln. Ein Vorschlag wäre, das jQuery-Objekt $element_id und die Zeichenfolge element_id so zu benennen, dass sie getrennt werden. Die Datenattribute in Ihrem Markup enthalten Werte wie #item11. Dies bedeutet, dass der jQuery-Selektor $(element_id) z.B. $('#item11'), versucht, einen Artikel mit id="item11" auszuwählen. Für keines der Elemente in Ihrem Markup sind jedoch IDs festgelegt. Daher gibt der Selektor undefined zurück.

Mit Ihrem aktuellen Markup können Sie versuchen, einen Selektor wie $('[data-target="'+element_id+'"]') zu verwenden, um die Elemente nach ihren Datenattributen auszurichten, obwohl Sie das Attribut data-target überspringen und einfach eine ID verwenden?

Ich schlage auch vor, Sie verhindern, dass die Scrolling-Animation eine Warteschlange erstellen, wenn der Benutzer schnell eingibt, da dies die Ergebnisse vor und zurück scrollt. Tun Sie dies, indem Sie .stop() wie folgt hinzufügen: $('.scroll').stop().animate({ //... }).

Ich habe put together an example mit meinen Vorschlägen oben. Das behebt nicht deinen ganzen Code (jetzt wo ist der Spaß darin?: O), aber hoffentlich bringt dich das irgendwo auf den richtigen Weg. Vielleicht brauchen Sie noch ein paar Optimierungen, aber zumindest sollten die Fehler weg sein.