jQueryのインデックス付きリストアイテムの入手方法

Question

タイトルリンクのリストをクリックすると、右側の関連記事が開きます。最初の記事はデフォルトで表示され、他の記事は次のタイトルがクリックされるまで表示されません。私が持っているものは、私が望むように表示されるデフォルトの記事ですが、クリックするとタイトルリンクが間違った順序で記事を表示します。

$(function codeAddress() { 
 
    $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html()); 
 
    window.onload = codeAddress; 
 

 
    $('a').click(function() { 
 
    $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html()); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
} 
 

 
.site-main { 
 
    display: grid; 
 
    grid-column-gap: 10px; 
 
    grid-template-columns: 1fr 1fr; 
 
} 
 

 
.half { 
 
    align-items: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="site-main"> 
 
    <div class="half test-titles"> 
 
    <ul> 
 
     <li> 
 
     <div> 
 
      <a href="#" title="Test post Two">Test post Three</a> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <a href="#" title="Test post Two">Test post Two</a> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <a href="#" title="Test post one">Test post one</a> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <a href="#" title="Hello world!">Hello world!</a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="hidden hidden-posts"> 
 
    <ul> 
 
     <li> 
 
     <div> 
 
      <article> 
 
      <header class="entry-header"> 
 
       <h2>Hello world!</h2> 
 
      </header> 
 
      <div class="entry-content"> 
 
       <p>Ugh four dollar toast cray authentic single-origin coffee brooklyn put a bird on it, intelligentsia hashtag vaporware lumbersexual yuccie occupy. Church-key man bun biodiesel, shaman disrupt single-origin coffee meggings lyft leggings. Listicle 
 
       street art tumblr twee heirloom, scenester whatever master cleanse viral la croix umami pickled typewriter affogato. Vaporware celiac fanny pack</p> 
 
      </div> 
 
      </article> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <article> 
 
      <header class="entry-header"> 
 
       <h2>Test post one</h2> 
 
      </header> 
 
      <div class="entry-content"> 
 
       <p>Direct trade YOLO chia art party authentic, tumeric pok pok vinyl iPhone +1 palo santo. Jean shorts pop-up banjo freegan, thundercats chambray mumblecore heirloom. Seitan 8-bit yr.</p> 
 
      </div> 
 
      </article> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <article> 
 
      <header class="entry-header"> 
 
       <h2>Test post Two</h2> 
 
      </header> 
 
      <div class="entry-content"> 
 
       <p>Put a bird on it tousled you probably haven&#8217;t heard of them intelligentsia affogato chia health goth. Taiyaki kickstarter pinterest, twee distillery listicle chartreuse gentrify iPhone literally photo booth leggings kale chips.</p> 
 
      </div> 
 
      <!-- .entry-content --> 
 
      </article> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <article> 
 
      <header class="entry-header"> 
 
       <h2>Test post Three</h2> 
 
      </header> 
 
      <div class="entry-content"> 
 
       <p>Tbh sriracha ramps taiyaki YOLO seitan hoodie farm-to-table cornhole waistcoat beard dreamcatcher godard affogato. Air plant stumptown you probably haven&#8217;t heard of them</p> 
 
      </div> 
 
      <!-- .entry-content --> 
 
      </article> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="half"> 
 
    <article class="posts-box"> 
 
    </article> 
 
    </div>

私はそこに、私は少しすっきりJSを作るために何ができる何かが、おそらくだが、私はそれが最初に正常に動作し取得したいのですが知っています。

閲覧jsfiddle。

おかげ

Answer 1

私は、この機能の使用を示唆している：そのない最良の方法ものの

$(function codeAddress() { 
    var postBox = $('.posts-box'); 
    var articleHeaders = $('.entry-header'); 
    function getPostContent(post){ 
     var content = ''; 
     articleHeaders.each(function(){ 
      var h1 = $(this).find('h2'); 
      if(post.html()==h1.html()){ 
       content = $(this).parent().html(); 
      } 
     }); 
     postBox.html(content); 
    } 
    $('a').click(function() { 
     getPostContent($(this));  // get content by link title 
    }); 
    getPostContent($('a').eq(0));  // if you want initial content 
}); 

https://codepen.io/FaridNaderi/pen/WOMBaL

が、それはあなたのコードの状況であなたを助け願っています。