学生検索プロジェクトjquery/javascript

Question

私は、学生名とメールアドレスのリストを持つページに検索バーを追加する必要があるプロジェクトをやっています。フォームが提出されると、入力された文字電子メールアドレスまたは生徒名のいずれかの検索バー。

これまでのところ、検索バーが追加され、ボタンのクリックイベントをリッスンし、入力から値を変数に追加する関数が開始されました。

私は、リスト項目に作成した入力変数が含まれているかどうかをチェックし、後で別のif文を実行して、そのクラスに含まれているクラスに基づいて表示または非表示することができるクラスを追加できます。

$(document).ready(function() { 
//set number of students to show on each page 
var inputValue; 
var showStudents = 10; 
//append search bar to the page 
$(".page-header").append('<div class="student-search"><input placeholder="Search for students..."><button>Search</button></div>'); 
//add pagination to the page 
$(".page").append('<div class="pagination"><ul></ul></div>'); 

//make page display 10 students at a time 

//make search input only show students that contain that letter. 
//use contains to add an ID?/class? to the student list item that matches the value in the input field. 
//display the students that have said ID/class and hide the others. 
$("button").click(function() { 
    //store the value of the input search into a variable 
    inputValue = $("input").val(); 
    console.log(inputValue); 
    //filter the list items by the input value and add CSS 


     if ('.student-details h3:contains(inputValue)') { 
     $('.student-details h3').addClass('showstudent') 
    } 
}); 

}）;

明らかに私の問題は、これを書くと、inputValueを含むものだけでなく、すべての.student-details h3項目にクラスを追加することで、「this」を使用できないということです。ボタン。これをコード化する最良の方法ですか？学生リストを配列に変換して、入力の値で配列を検索し、結果を新しい配列に戻す必要がありますか？私はここで一種の喪失です！助けてくれてありがとう。

Answer 1

あなたはこのアプローチを試すことができます。

$('.student-details h3').each(function() { 
    if ($(this).text() == inputValue) { 
     $(this).addClass('showstudent'); 
    } 
}