查找DOM元素出現最

Question

容器div.example可以有不同的1級子元素（部分，DIV，UL，導航 ...）。這些元素的數量和類型可能會有所不同。

我必須找到發生最多的直接孩子的類型（例如div）。 什麼是簡單的jQuery或JavaScript解決方案？

jQuery 1.7.1可用，但它也應該在IE <（array.filter）中工作。

編輯：使用.children()謝謝@Jasper，@Vega和@Robin Maben :)

Answer 1

迭代通過兒童和日誌您發現element.tagName S上的號碼：

//create object to store data 
var tags = {}; 

//iterate through the children 
$.each($('#parent').children(), function() { 

    //get the type of tag we are looking-at 
    var name = this.tagName.toLowerCase(); 

    //if we haven't logged this type of tag yet, initialize it in the `tags` object 
    if (typeof tags[name] == 'undefined') { 
     tags[name] = 0; 
    } 

    //and increment the count for this tag 
    tags[name]++; 
}); 

現在tags對象保存作爲#parent元素的子節點出現的每種標籤類型的編號。

這裏是一個演示：http://jsfiddle.net/ZRjtp/（看你的對象控制檯）

然後找到發生的最你可以這樣做標籤：

var most_used = { 
     count : 0, 
     tag : '' 
    }; 

$.each(tags, function (key, val) { 
    if (val > most_used.count) { 
     most_used.count = val; 
     most_used.tag = key; 
    } 
}); 

的most_used對象現在持有的標籤使用次數最多，使用次數也最多。

這裏是一個演示：http://jsfiddle.net/ZRjtp/1/

Answer 2

編輯：我覺得像下面一個jQuery功能應該比較有用..

DEMO

$.fn.theMostChild = function() { 
    var childs = {}; 
    $(this).children().each(function() { 
     if (childs.hasOwnProperty(this.nodeName)) { 
      childs[this.nodeName] += 1; 
     } else { 
      childs[this.nodeName] = 1; 
     } 
    }); 
    var maxNode = '', maxNodeCount = 0; 
    for (nodeName in childs) { 
     if (childs[nodeName] > maxNodeCount) { 
      maxNode = nodeName; 
      maxNodeCount = childs[nodeName]; 
     } 
    } 
    return $(maxNode); 
} 

然後你就可以了，

$('div.example').theMostChild().css('color', 'red'); 

---

下面的函數應該給你計算子元素的數量，從中你可以得到最大數量。見下文， DEMO

$(function() { 
    var childs = {}; 
    $('div.example').children().each(function() { 
     if (childs.hasOwnProperty(this.nodeName)) { 
      childs[this.nodeName] += 1; 
     } else { 
      childs[this.nodeName] = 1; 
     } 
    }); 

    for (i in childs) { 
     console.log(i + ': ' + childs[i]); 
    } 
}); 

Answer 3

這也不是沒有可能對預期的類型的子節點的一些信息。

編輯：可能爲Jasper指出我們不需要事先知道標籤名稱。如果您只在特定的一組選擇器內查找，以下工作。

var selectorArray = ['div', 'span', 'p',........] 

var matches = $(div).children(selectorArray.join());  
var max = 0, result = [];  
$.each(selectorArray, function(i, selector){ 

    var l = matches.filter(selector).length; 
    if(l > max){ 
    max = l; 
    result[max] = selector; 
    } 

}); 

result[max]給你的標籤名稱和max給你的出現計數