如何使用元素's属性值，以针对jQuery中具有相同属性值的另一个元素

How to use an element's attribute value to target another element with an identical attribute value in jQuery?

本文关键字：属性 元素 jQuery 另一个 何使用      更新时间：2023-09-26

我有一个包含文章名称列表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项目也位于顶部

这就是你想要的吗？

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>

您可以使用数据新闻目标来说明它将移动的元素

工作JSFiddle示例

你需要做的是：

  1. 获取要用于与article元素匹配的唯一名称。

  2. 使用它可以找到要移动到顶部的文章元素。

  3. 将article元素移到顶部。

建议：

  • 将唯一名称设置为菜单项上的ID。它会更容易获得和更干净（无论如何，id都应该是唯一的）。

  • 使用.on("click", function() { ... })而不是.click(function() { ... })，原因有很多。

现在，单击需要使用this.id查找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个月后忘记自己做了什么时更耗时地弄清楚发生了什么。

相关文章：