Question

如果我的HTML看起来像：

<div><h1>red</h1></div>
<div><h1>red</h1></div>
<div><h1>red</h1></div>
<div><h1>red</h1></div>
<div><h1>yellow</h1></div>
<div><h1>yellow</h1></div>
<div><h1>yellow</h1></div>
<div><h1>green</h1></div>
<div><h1>pink</h1></div>

jQuery中评估有多少h1匹配的最佳方法是什么，如果匹配计数是＆gt; 1对于特定的h1，将其div放在容器div中：

<div class="matches">
    <div><h1>red</h1></div>
    <div><h1>red</h1></div>
    <div><h1>red</h1></div>
    <div><h1>red</h1></div>
</div>
<div class="matches">
    <div><h1>yellow</h1></div>
    <div><h1>yellow</h1></div>
    <div><h1>yellow</h1></div>
</div>
<div><h1>green</h1></div>
<div><h1>pink</h1></div>

我已经挂了一个each（）函数，它将每个h1返回给我，但我不确定这是否是最好的方法（jQuery newb试图突破新领域）。

Answer 1

var $containers = $('div'),
    $headings = $containers.find('> h1'),
    targetContainer = 'body',
    matches = {};

/*
 * First we traverse through the headings
 * pushing exact matches to a 'matches' object
 */
$headings.each(function() {
    var $this = $(this),
        text = $this.text();

    if (typeof matches[text] === 'undefined') {
        matches[text] = [];
    }

    matches[text].push($this.closest('div')[0]);
});

/*
 * Remove the initial, unsorted collection
 */
$containers.remove();

/*
 * Now let's see if we have duplicate
 * headings.
 */
for (group in matches) {
    if (matches[group].length > 1) {

        /*
         * Put them all in a '.matches' div
         * and append to our target container
         * e.g. body
         */
        $('<div class="matches"></div>').html(matches[group]).appendTo(targetContainer);

        /*
         * Delete the group
         * after use
         */
        delete matches[group];
    }
}

/*
 * This is optional:
 * I used two separate loops to
 * put unmatched headings after the
 * matched groups.
 *
 * You could use the if..else from
 * the previous loop.
 */

for (group in matches) {
    $(matches[group]).appendTo(targetContainer);
}

此代码即使使用混合的无序集合也可以使用，例如

<div><h1>red</h1></div>
<div><h1>green</h1></div>
<div><h1>yellow</h1></div>
<div><h1>red</h1></div>
<div><h1>red</h1></div>
<div><h1>yellow</h1></div>
<div><h1>red</h1></div>
<div><h1>yellow</h1></div>
<div><h1>pink</h1></div>

<强>更新

正如我所提到的，可以将匹配和不匹配的组保持在一起 - 删除第二个for..in循环并使用if..else，如下所示：

/* ...
 * Now let's see if we have duplicate
 * headings.
 */
for (group in matches) {
    if (matches[group].length > 1) {

        /*
         * Put them all in a '.matches' div
         * and append to our target container
         * e.g. body
         */
        $('<div class="matches"></div>').html(matches[group]).appendTo(targetContainer);
    } else {
        $(matches[group]).appendTo(targetContainer);
    }
}

但是，由于JavaScript对象存储在内存中的方式，无法预测枚举的顺序。

Answer 2

    $('div').eq(0).before('<div class="matches">');

var  this_element= '';
var next_element = '';
var length = 0 ;
$('div').each(function(){

    this_element= $(this).find('h1').text();
    next_element = $(this).next('div').find('h1').text();


   if((this_element!= next_element) && (next_element!='') && (length>0)){

       $(this).after('</div><div class="matches">');
       length = 0 ;
   }
   if((!next_element) && (length>0)){
        $(this).after('</div>');
        length = 0 ;
   }
     length++;
});

如何评估匹配元素并将其组合在一起

2 个答案: