javascript - 在 jQuery 中，如何使用一个元素的属性值来定位另一个具有相同属性值的元素？

Question

我有一个文章名称列表list-A 的菜单，以及相应的文章内容列表list-B。每个列表 A 和列表 B 项目对在其类别中共享相同的值，例如。 class="orderCntrl-6062347"。

我希望能够从列表 A 中选择一个项目，将列表 B 中的相应文章带到列表 B 的顶部。

我知道如何通过使用以下命令将所选项目置于列表顶部来重新排序列表:

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

这是我的代码目前的样子:

 <!-- 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>

这是一个 link to how things will look ，绿色侧边菜单是 list-A(在 1300 像素以下的屏幕上，它可能位于页面标题上方)。

如何调整脚本使相应的列表 B 项也置于顶部？

Answer 1

这就是您要找的吗？

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> 

你可以使用 data-news-target 来说明它将移动什么元素