Question

这是我的输入我喜欢这样的120行代码，城市名称不限，此时有20个城市，但可能会有40个甚至60个。

<a href="somelink" rel="city3">Name1</a><br>
<a href="somelink" rel="city2">Name2</a><br>
<a href="somelink" rel="city1">Name4</a><br>
<a href="somelink" rel="city4">Name6</a><br>
<a href="somelink" rel="city3">Name5</a><br>
<a href="somelink" rel="city1">Name3</a><br>
<a href="somelink" rel="city4">Name7</a><br>
<a href="somelink" rel="city1">Name8</a><br>

我需要这个输出来对它们进行分组并给出一个名为他们所属城市的标题

<h1>city1</h1>
<div class="gather">
<a href="somelink" rel="city1">Name4</a><br>
<a href="somelink" rel="city1">Name3</a><br>
<a href="somelink" rel="city1">Name8</a><br>
</div>
<h1>city2</h1>
<div class="gather">
<a href="somelink" rel="city2">Name2</a><br>
</div>
<h1>city3</h1>
<div class="gather">
<a href="somelink" rel="city3">Name1</a><br>
<a href="somelink" rel="city3">Name5</a><br>
</div>
<h1>city4</h1>
<div class="gather">
<a href="somelink" rel="city4">Name6</a><br>
<a href="somelink" rel="city4">Name7</a><br>
</div>

我相信包装是我正在寻找的东西

Answer 1

这可以帮助您入门：

$('a').each(function(i, el) {
    var e = $(el);
    if(e.parent().attr('class') != 'gather') {
        var rel = e.attr('rel');
        var a = $('a[rel=' + rel + ']');
        var aAndBr = a.add(a.next());
        var div = aAndBr.wrapAll('<div class="gather">').parent();
        var h1 = $('<h1>').text(rel).insertBefore(div);
    }
});

的jsfiddle：

http://jsfiddle.net/647s8/

希望这有帮助。

Answer 2

您可以按rel属性选择每个元素集，然后将它们附加到另一个结构中。如果.append()某个已存在于DOM中的元素，它将被移动：

$(function () {

    //get all the links that have a `rel` attribute that starts with `city`
    var $links = $('#container').children('a[rel^="city"]'),

        //setup an output variable to sort the links
        output = {};

    //iterate through each of the links and add them to an object sorted by `rel` attribute
    $.each($links, function (index, element) {

        //get the number after `city` in the `rel` attribute
        var cityNumber = $(element).attr('rel').substr(4);

        //if this index does not exist, make it
        if (typeof output[cityNumber] == 'undefined') {
            output[cityNumber] = [];
        }

        //push element into proper index
        output[cityNumber].push(element);
    });

    //remove the container's HTML
    $('#container').empty();

    //loop through the `output` object
    $.each(output, function (index, obj) {

        //append a new set of links for each index (sorted by `rel` attribute)
        $('#container').append('<h1>city' + index + '</h1>').append($('<div />', { class : 'gather' }).append(obj));
    });
});

以下是演示：http://jsfiddle.net/d2FKS/1/

Answer 3

你想要wrapAll，但这不是你唯一的问题。您还需要为每个城市仅运行一次包裹，但您不知道您拥有多少个城市。此外，城市似乎没有以任何可预测的顺序发生，因此我们必须假设秩序无关紧要。然后，您必须捕获城市名称并将其应用于h2 s。

var seenRels = {};
$('a[rel^="city"]').each(function() {
    var $this = $(this), thisRel = $this.attr('rel');
    if (!(thisRel in seenRels)) {
        var $group = $this.siblings('a[rel="' + thisRel + '"]').andSelf().wrapAll('<div class="gather">');
        seenRels[thisRel] = 1;
    }
});
$('div.gather').each(function () {
    var $this = $(this), thisCity = $this.children('a').attr('rel');
    $this.before('<h2>' + thisCity + '</h2>');
});

最后，你要清理那些我作为练习留下的br，因为我的孩子在哭。

http://jsfiddle.net/MB858/1/

Answer 4

将您的城市放入这样的父级div之后：

<div id="cities">
    <a href="somelink" rel="city3">Name1</a><br>
    <a href="somelink" rel="city2">Name2</a><br>
    <a href="somelink" rel="city1">Name4</a><br>
    <a href="somelink" rel="city4">Name6</a><br>
    <a href="somelink" rel="city3">Name5</a><br>
    <a href="somelink" rel="city1">Name3</a><br>
    <a href="somelink" rel="city4">Name7</a><br>
    <a href="somelink" rel="city1">Name8</a><br>
</div>

此代码将使用所需的标头和结构将它们按rel值分组，然后按rel值排序：

$("#go").click(function() {
    var index = {};
    var keys = [];
    var cities = $("#cities"), gather, key, len;
    // go through each city and put it into the index
    // build a list of keys along the way so we can sort them
    $("a", cities).each(function() {
        var rel = this.rel;
        if (!(rel in index)) {
            keys.push(rel);
            index[rel] = [];
        }
        index[rel].push(this);
    });
    // clear cities div
    cities.html("");
    // now index has an array for each city name
    // sort the keys by only the digits at the end
    keys.sort(function(a,b) {
        return(parseInt(a.replace("city", ""), 10) - parseInt(b.replace("city", ""), 10));
    });
    // for each city in the index
    for (var i = 0; i < keys.length; i++) {
        key = keys[i];
        // create title
        cities.append("<h1>" + key + "</h1>");
        // create gather div
        gather = $('<div class="gather"></div>');
        // iterate through the instances of this city and 
        // add them to the gather object
        for (var j = 0, len = index[key].length; j < len; j++) {
            gather.append(index[key][j]);
            gather.append("<br>");
        }
        cities.append(gather);
    }
});

以下是一个有效的例子：http://jsfiddle.net/jfriend00/jG5gP/

Answer 5

这是我的目标。

$(function(){
  var cities = $('a[rel^="city"]');   
  $.each(cities, function(i,value){
    cityNum = $(value).attr('rel').split('city');
    cityNum = cityNum[1];   
    $('a[rel="city'+i+'"]').wrapAll('<div class="gather" />').filter('a:first').before('<h3> City: '+cityNum+' </h3>'); 
  });   
});

Jquery Wrapping

5 个答案: