如何用jQuery包装一组项目中的元素?

时间:2015-06-28 10:46:05

标签: javascript jquery

我有以下标记:

<article class="linkWrapper" data-group="1">
  <a href="#">...</a>
</article>

<article class="linkWrapper" data-group="1">
  <a href="#">...</a>
</article>

<article class="linkWrapper" data-group="2">
  <a href="#">...</a>
</article>

<article class="linkWrapper" data-group="2">
  <a href="#">...</a>
</article>

<article class="linkWrapper" data-group="2">
  <a href="#">...</a>
</article>

我想根据linkWrapper's属性将这些<section class="linkGroup">..</section>与另一个父元素data-group包装起来。如何使用jQuery

执行此操作

4 个答案:

答案 0 :(得分:1)

这是你可以做到的一种方式:

[data-group]
    // Cache object which stores which groups we've processed
    var groupedSections = {};
    $(".linkWrapper[data-group]").each(function() {
        var group = $(this).attr("data-group");
        // For each found group, check to see if we have processed that group
        if(!groupedSections[group]) {
            // If not, wrap the matching selectors...
            $(".linkWrapper[data-group='"+group+"']").wrapAll("<section>");
            // Store that group in the cache object:
            groupedSections[group] = true;
        }
    });

答案 1 :(得分:0)

使用jQuery wrap function

$(".linkWrapper").wrap("<section class='linkGroup'> .. </section>");

答案 2 :(得分:0)

示例:CODEPEN

蓝色是您的<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Score To Percentile" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="numberDecimal" android:ems="10" android:id="@+id/quant" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="70dp" android:hint="Quantitative Ability" android:gravity="center" android:textStyle="italic" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="numberDecimal" android:ems="10" android:id="@+id/problem" android:layout_marginTop="50dp" android:layout_below="@+id/quant" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:hint="Problem Solving" android:gravity="center" android:textColorLink="#ffffdbeb" android:textStyle="italic" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="numberDecimal" android:ems="10" android:id="@+id/verbal" android:layout_marginTop="50dp" android:hint="Verbal Ability" android:gravity="center" android:textColorLink="#ff48f3ff" android:layout_below="@+id/problem" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:textStyle="italic" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Calculate" android:id="@+id/button" android:layout_below="@+id/verbal" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="60dp" android:textStyle="italic" android:typeface="monospace" /> ,红色边框是.linkWrapper换行

section

答案 3 :(得分:0)

使用:

delete [] adj;
仅使用

$('.linkWrapper[data-group]').wrap('<section class="linkGroup" />'); ,因为该值可能是任何值,并且您希望包装具有任何值的值。

请参阅attribute equals selectorwrap