如何使用元素的屬性值在 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>

這是一個指向外觀的鏈接，綠色側邊菜單是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 來說明它將移動的元素

Answer 2

工作 JSFiddle 示例

你需要做的是：

1. 獲取要用於與文章元素匹配的唯一名稱。

2. 使用它來查找要移至頂部的文章元素。

3. 將文章元素移到頂部。

建議：

• 將唯一名稱設置為菜單項上的 ID。 它會更容易獲得和更清潔（無論如何，id 應該是唯一的）。

• 由於這里提到的許多原因.on("click", function() { ... })請使用.on("click", function() { ... })而不是.click(function() { ... }) 。

現在，點擊你需要找到id的this使用this.id 。 然后你需要添加一個. 到它並使用符號$()將元素作為對象抓取。 然后完全按照您之前所做的方式添加它。

示例 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>

示例 jQuery

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

可以簡化為：

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

但那可讀性要低得多，這將使您在 6 個月后忘記自己所做的事情時弄清楚發生了什么會更加耗時。