user1642545 user1642545 - 7 months ago 16
Javascript Question

Select menu list item to re-order corresponding article list to top of list

I have a menu of a list of article names (list A), and a corresponding list of articles content, (list B). Each list A and list B item pair share an identifying class eg, class=" orderCntrl-6062347"

I want to be able to select an item from list A to bring the corresponding article from list B to the top of list B.

I know how to re-order the lists by using the following to bring a selected item to the top of a list

<script>
$("li.orderIt").click(function() {

$(this).parent().prepend($(this));
});
</script>


But how do I adjust it so that it brings the corresponding list B item to the top as well?

Here's a link to how things will look, green side menu is List A (may be above page title on screens under 1300px) http://albanyjuniorhighschool.businesscatalyst.com/news-and-events-two.html

Any advice on this would be greatly appreciated!
Thanks.
(for some reason the top list html won't render as code?! Sorry



Item 1
Item 2
Item 3



<!-- List B -->
<ul class="list-B">
<li class="orderCntrl-6062347"><h2 class="newsTitle">Item One</h2></li>
<li class="orderCntrl-6062348"><h2 class="newsTitle">Item Two</h2></li>
<li class="orderCntrl-6062349"><h2 class="newsTitle">Item Three</h2></li>
</ul>


<!-- script to bring accompanying article to top of list on selecting side menu -->
<script>
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
</script>


(have included this image of the code as list-A code above isn't rendering out)

enter image description here

Answer

Is this kind of what you are looking for?

https://jsfiddle.net/stevenkaspar/61oL0Lfm/

<ul class="list-A">                 
  <li class="orderCntrl-6062347" data-news-target='#news1'><h2 class="newsTitle">Item One</h2></li>
  ...

<!-- List B -->
<ul class="list-B">                 
  <li id='news1'>NEWS One</li>   

<script>           
  $("[data-news-target]").click(function() {      

    $(this).parent().prepend($(this));    

    var target_element = $( $(this).data('newsTarget') );
    target_element.parent().prepend( target_element );              
  });
</script> 

You can use data-news-target to say what element it will move