Question

我有一个文章名称列表list-B的菜单，以及相应的文章内容列表class="orderCntrl-6062347"。每个列表A和列表B项对在其类中共享相同的值，例如。 $("li.orderIt").click(function() { $(this).parent().prepend($(this)); });。

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

我知道如何使用以下内容重新排序列表，以便将所选项目置于列表顶部：

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

这是一个http://www.farrislab.net，绿色侧面菜单是<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="@android:color/white" tools:context=".RegisterFragment"> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tempSpace" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:id="@+id/editTextUsername" android:hint="Username" android:layout_above="@+id/editTextPassword" android:layout_below="@id/tempSpace" android:layout_alignRight="@id/tempSpace" android:layout_alignEnd="@id/tempSpace" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/editTextPassword" android:hint="Password" android:layout_above="@+id/editTextForename" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignRight="@+id/editTextUsername" android:layout_alignEnd="@+id/editTextUsername" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/editTextForename" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:hint="Forename " android:layout_above="@+id/editTextSurname" android:layout_alignRight="@+id/editTextPassword" android:layout_alignEnd="@+id/editTextPassword" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/editTextSurname" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:hint="Surname" android:layout_alignRight="@+id/editTextForename" android:layout_alignEnd="@+id/editTextForename" android:layout_above="@+id/editTextEmail" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:ems="10" android:id="@+id/editTextEmail" android:hint="Email" android:layout_above="@+id/editTextAge" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignRight="@+id/editTextPassword" android:layout_alignEnd="@+id/editTextPassword" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="number" android:ems="10" android:id="@+id/editTextAge" android:hint="Age" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignRight="@+id/editTextEmail" android:layout_alignEnd="@+id/editTextEmail" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Register" android:id="@+id/btnRegister" android:layout_marginTop="41dp" android:layout_below="@+id/editTextAge" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignRight="@+id/editTextSurname" android:layout_alignEnd="@+id/editTextSurname" />（它可能位于1300px以下屏幕上的页面标题之上）。

如何调整脚本以将相应的列表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

Working JSFiddle Example

您需要做的是：

获取您要用于与文章元素匹配的唯一名称。
使用它来查找要移到顶部的文章元素。
将文章元素移到顶部。

建议：

在菜单项上将唯一名称设置为ID。它会更容易获得和更清洁（无论如何，id都应该是唯一的）。
出于提及here的众多原因，请使用.on("click", function() { ... })而不是.click(function() { ... })。

现在，点击后，您需要使用id找到this的{{1}}。然后，您需要向其添加this.id并使用符号.将元素作为对象抓取。然后以与之前完全相同的方式将其前置。

示例HTML：

$()

示例jQuery

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

可以简化为：

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

但这种可读性要低得多，如果你忘记了自己的所作所为，那么在6个月之后弄清楚会发生什么事情会更加耗时。

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

2 个答案:

示例HTML：

示例jQuery