複数のdivにIDを使用し、jQueryを使用してコンテンツを取得する

Question

今日は非常に特別な問題があります。Spring,Thymeleaf、HtmlとJavaScriptを使用しています。私はJavaのバックエンドからの複数のデータセットを持っており、各データセットのために私は<div />を作成し、隠されたdiv要素にデータをバインドする必要があります。

これを使用して

<div class="container page-small" th:each="line: ${LINES}"> 
    <div id="line_data_titles" hidden="true" th:attr="data-txt=${line.titles}"></div> 
    ... 
</div> 

それは私がID line_data_titlesで<div>を持っていることを意味し、正確X回。その周りに方法はありません。これを解決するには、少なくとも私の頭の中には何も入っていません。私の質問にそう：

私は今、私のdiv要素からデータを取得するためにjQueryを使用する場合：

<div class="container page-small" th:each="line: ${LINES}"> 
    <div id="line_data_titles" hidden="true" th:attr="data-txt=${line.titles}"></div> 
    ... 
    <script> 
     var titles = $("#line_data_titles").data("txt"); 
    </script> 
</div> 

はそれがjQueryがするように、それが定義されて<div>の内側にそのJavaScriptコードにのみ有効にすることが可能です定義されているdivの中からid line_data_titlesの<div>の値だけを読んでください。私はあなたが私の意味を理解してくれることを願っていますだから私はjQueryのみJavaScriptが定義されているdiv要素のIDを選択したい

<div class="container page-small"> 
    <div id="line_data_titles" hidden="true" data-txt="titles of line 0"></div> 
    ... 
    <script> 
     var titles = $("#line_data_titles").data("txt"); 
    </script> 
</div> 

<div class="container page-small"> 
    <div id="line_data_titles" hidden="true" data-txt="titles of line 1"></div> 
    ... 
    <script> 
     var titles = $("#line_data_titles").data("txt"); 
    </script> 
</div> 

<div class="container page-small"> 
    <div id="line_data_titles" hidden="true" data-txt="titles of line 2"></div> 
    ... 
    <script> 
     var titles = $("#line_data_titles").data("txt"); 
    </script> 
</div> 

.... 

：それは次のようになります。それは可能ですか？

Answer 1

それはjQueryのだけそれが が定義されている場所のdiv内からのID line_data_titlesと から値を読み込みますように、それが定義されている 内部にのみ有効なものJavaScriptコードを作成することは可能ですか？

各要素に異なるIDを割り当てる必要があります。固有のIDを割り当てる必要があります。同じIDを持つ要素が複数ある場合、HTMLは無効です。 「Rejith Rクリシュナンは、」あなたの問題はおそらく、動的なIDを持つの線に沿って何か解決できる、と述べたことと同様に

：

また

<div class="container page-small" th:each="line: ${LINES}"> 
    <div id="line_data_titles_${lines.id}" hidden="true" th:attr="data-txt=${line.titles}"></div> 
    ... 
    <script> 
     var titles = $("#line_data_titles_${lines.id}").data("txt"); 
    </script> 
</div> 

を、あなたはクラスを使用することができ、の線に沿って何か：

<div class="container page-small"> 
    <div class="line_data_titles" hidden="true" data-txt="titles of line 0"></div> 
    ... 
</div> 

<div class="container page-small"> 
    <div class="line_data_titles" hidden="true" data-txt="titles of line 1"></div> 
    ... 
</div> 

<script> 
    $(".line_data_titles").each(function() { 
    var titles = $(this).data("txt"); 
    }) 
</script> 

私は助けてくれることを願っています！

Answer 2

使用クラス名intead IDの

<div class="container page-small"> 
    <div class="line_data_titles" hidden="true" data-txt="titles of line 0"></div> 
</div> 
<div class="container page-small"> 
    <div class="line_data_titles" hidden="true" data-txt="titles of line 1"></div> 
</div> 
<div class="container page-small"> 
    <div class="line_data_titles" hidden="true" data-txt="titles of line 2"></div> 
</div> 

とjQueryコードはなど

<script> 
    var titles = $(".line_data_titles").data("txt"); // for all elements 
    var title_1 = $(".line_data_titles")[0].data("txt"); // for the first element 
</script> 

...