2

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 identical value in their 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:

$("li.orderIt").click(function() {
    $(this).parent().prepend($(this));               
});

This is what my code currently looks like:

 <!-- List A selecting an item here should bring selected item and paired item in list B to the top of each of their lists -->
 <ul class="list-A">
     <li class="orderIt orderCntrl-6062347"><a>Item 1</a></li>
     <li class="orderIt orderCntrl-6062348"><a>Item 2</a></li>
     <li class="orderIt orderCntrl-6062349"><a>Item 3<a></li>                 
 </ul>
 <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 - currently only bring elements in List A to the top of their lists -->
 <script>           
     $("li.orderIt").click(function() {               
         $(this).parent().prepend($(this));               
     });
 </script>

Here's a link to how things will look, the green side menu is list-A (it may be above the page title on screens under 1300px).

How do I adjust the script to bring the corresponding list B item to the top as well?

4castle
  • 32,613
  • 11
  • 69
  • 106
Grant
  • 217
  • 1
  • 4
  • 17

2 Answers2

1

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

Steven Kaspar
  • 1,147
  • 10
  • 14
1

Working JSFiddle Example

What you need to do is:

  1. Get the unique name you want to use to match with the article element.

  2. Use it to find the article element you want to move to the top.

  3. Move the article element to the top.

Recommendations:

  • Set the unique name as an ID on the menu item. It'll be easier to get and cleaner (id's are supposed to be unique anyway).

  • Use .on("click", function() { ... }) rather than .click(function() { ... }) for the many reasons mentioned here.

Now, on click you need to find the id of this using this.id. Then you need to add a . to it and grab the element as an object using the symbols $(). Then prepend it in exactly the way you did before.

Example HTML:

<ul class="List-A">
    <li class="orderIt" id="unique-name-1">Item 1</li>
    <li class="orderIt" id="unique-name-2">Item 2</li>
    <li class="orderIt" id="unique-name-3">Item 3</li>
</ul>
<ul class="List-B">
    <li class="unique-name-1">Article 1</li>
    <li class="unique-name-2">Article 2</li>
    <li class="unique-name-3">Article 3</li>
</ul>

Example jQuery

$(".List-A").on("click", ".orderIt", function() {               
    $(this).parent().prepend($(this));
    target_article = $('.' + this.id)
    target_article.parent().prepend(target_article)
});

It could be simplified to:

$(".List-A").on("click", ".orderIt", function() {               
    $(this).parent().prepend($(this));
    $('.' + this.id).parent().prepend($('.' + this.id));
});

but that's much less readable, which will make it more time-consuming to figure out what's going on 6 months later when you've forgotten what you did.

Community
  • 1
  • 1
Dom
  • 2,275
  • 3
  • 24
  • 34
  • Thanks Dom, I'm going with the approach that Stephen Kaspar provided - works perfectly for me. But thanks for your attention to this problem of mine all the same! – Grant May 02 '16 at 02:41
  • Thanks, but I understood Stephen Kaspars answer. I understand yours as well. – Grant May 02 '16 at 03:00