JQuery để kiểm tra các id trùng lặp trong DOM

106

Tôi đang viết ứng dụng với ASP.NET MVC. Ngược lại với ASP.NET truyền thống, bạn chịu trách nhiệm nhiều hơn trong việc tạo tất cả các id trong trang đã tạo của mình. ASP.NET sẽ cung cấp cho bạn những id khó chịu nhưng độc đáo.

Tôi muốn thêm một đoạn mã jQuery nhanh để kiểm tra id trùng lặp trong tài liệu của tôi. Chúng có thể là id cho DIVS, hình ảnh, hộp kiểm, nút, v.v.

<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div>

Tôi đang tìm một tiện ích loại bỏ quên sẽ chỉ cảnh báo tôi khi tôi làm điều gì đó bất cẩn.

Có, tôi sẽ chỉ sử dụng cái này trong quá trình thử nghiệm và các lựa chọn thay thế (chẳng hạn như plugin firebug) cũng được hoan nghênh.

jquery dom

— Simon_Weaver
nguồn

214

Phần sau sẽ ghi cảnh báo vào bảng điều khiển:

// Warning Duplicate IDs
$('[id]').each(function(){
  var ids = $('[id="'+this.id+'"]');
  if(ids.length>1 && ids[0]==this)
    console.warn('Multiple IDs #'+this.id);
});

— sunsean
nguồn

hoàn hảo! cảm ơn! đã phát hiện ra ba nơi mà tôi có ID trùng lặp. Tôi hơi thất vọng khi hầu hết mọi người giải quyết vấn đề này là sử dụng 'firebug' hoặc 'html validator'. đó chưa đủ tốt! tôi muốn nắm bắt các bản sao bất ngờ trong các tình huống buồn.

— Simon_Weaver

4

hehe và tôi đã chuyển console.warn để cảnh báo (...) vì vậy tôi PHẢI sửa chúng :)

— Simon_Weaver

đã tìm thấy điều này vô cùng hữu ích và có giá trị. tôi nghĩ rằng nó nên được một tiêu chuẩn trong khuôn khổ - đặc biệt là trong gỡ lỗi

— Simon_Weaver

6

Lượng traversals DOM cần cho việc này đến công việc là khá đáng kinh ngạc

— Josh Stodola

8

Giải pháp rất hay nhưng nó cần thêm dấu ngoặc kép var ids = $('[id=\''+this.id+'\']');để nó hoạt động với các dấu chấm và những thứ kỳ lạ khác trong ID.

— zidarsk 8

33

Phiên bản này nhanh hơn một chút và bạn có thể sao chép nó vào nút đánh dấu để biến nó thành một bookmarklet.

javascript:(function () {
  var ids = {};
  var found = false;
  $('[id]').each(function() {
    if (this.id && ids[this.id]) {
      found = true;
      console.warn('Duplicate ID #'+this.id);
    }
    ids[this.id] = 1;
  });
  if (!found) console.log('No duplicate IDs found');
})();

— Sjoerd
nguồn

3

Thuật toán này tốt hơn, chỉ yêu cầu một truyền tải dom thay vì một cho mỗi phần tử phù hợp. Nên là câu trả lời được chấp nhận.

— m_x

1

Nó cho kết quả dương tính sai đối với các biểu mẫu có đầu vào là name = id.

javascript:(function () {   var ids = {};   var found = false;   $('[id]').each(function() {     var id = this.getAttribute('id');     if (id && ids[id]) {       found = true;       console.warn('Duplicate ID #'+id);     }     ids[id] = 1;   });   if (!found) console.log('No duplicate IDs found'); })();

sẽ tốt hơn.

— alpo

14

Tôi có một trang lớn, vì vậy tập lệnh chạy quá chậm để hoàn thành (nhiều thông báo "tiếp tục tập lệnh"). Điều này hoạt động tốt.

(function () {
    var elms = document.getElementsByTagName("*"), i, len, ids = {}, id;
    for (i = 0, len = elms.length; i < len; i += 1) {
        id = elms[i].id || null;
        if (id) {
            ids[id] =  ids.hasOwnProperty(id) ? ids[id] +=1 : 0;
        }
    }
    for (id in ids) {
        if (ids.hasOwnProperty(id)) {
            if (ids[id]) {
                console.warn("Multiple IDs #" + id);
            }
        }
    }
}());

— AutoSponge
nguồn

tuyệt quá! cảm ơn. tôi thường quên rằng tôi có cái này đang chạy trong sản xuất và thực sự nên tối ưu hóa nó ngay bây giờ - hoặc thêm cài đặt gỡ lỗi để bật / tắt nó!

— Simon_Weaver

Tôi đang liên tục làm việc để kết hợp các tập lệnh trong các cấu hình khác nhau và điều này chắc chắn sẽ giúp ích cho tôi rất nhiều. Cảm ơn :)

— Andy Gee

+1 cho giải pháp JavaScript đơn giản. Sau khi tìm thấy các id trùng lặp, tôi đã sử dụng biểu thức XPath ( $x("//*[@id='duplicated-id']")) trong bảng điều khiển để truy vấn các phần tử có id được sao chép.

— cassiomolin,

12

Bạn nên thử HTML Validator (tiện ích mở rộng của Firefox). Nó chắc chắn sẽ cho bạn biết trang có id trùng lặp và hơn thế nữa.

— Ionuț G. Stan
nguồn

8

Tại sao bạn không chỉ xác thực html của bạn?

Double ID không được phép và thông thường bạn sẽ gặp lỗi phân tích cú pháp.

— Natrium
nguồn

2

có những lựa chọn nào cho việc này?

— Simon_Weaver

Cũng trong FF, sử dụng thanh công cụ phát triển web dưới công cụ nó có xác nhận

— IEnumerator

4

Khi làm việc với các widget như hộp thoại từ jquery ui, thường xảy ra trường hợp bạn kết thúc với các danh sách trùng lặp trong DOM khi không dọn dẹp sau khi tạo các hộp thoại.

— Guido

4

Một cách khác để định vị các bản sao nhưng điều này sẽ thêm một lớp lỗi nên nó sẽ có văn bản màu đỏ:

// waits for document load then highlights any duplicate element id's
$(function(){ highlight_duplicates();});

function highlight_duplicates() {
  // add errors when duplicate element id's exist
  $('[id]').each(function(){ // iterate all id's on the page
    var elements_with_specified_id = $('[id='+this.id+']');
    if(elements_with_specified_id.length>1){
      elements_with_specified_id.addClass('error');
    }
  });


  // update flash area when warning or errors are present
  var number_of_errors = $('.error').length;
  if(number_of_errors > 0)
    $('#notice').append('<p class="error">The '+number_of_errors+
      ' items below in Red have identical ids.  Please remove one of the items from its associated report!</p>');
}

— Joshaven Potter
nguồn

thật tuyệt! cảm ơn. Tôi thực sự thấy câu trả lời được chấp nhận ban đầu là vô giá. bắt được rất nhiều thứ và tiết kiệm có lẽ hàng giờ đồng hồ!

— Simon_Weaver

Tuyệt, nhưng tại sao không chỉ sử dụng các chức năng của bảng điều khiển và để chúng làm phần còn lại? Tách logic và trình bày, v.v.

— Will Morgan

3

Câu trả lời jQuery hàng đầu, được viết lại trong ES6:

  [...document.querySelectorAll('[id]')].forEach(el => {
    const dups = document.querySelectorAll(`[id="${el.id}"]`);

    if (dups.length > 1 && dups[0] === el) {
      console.error(`Duplicate IDs #${el.id}`, ...dups);
    }
  });

— Rafi
nguồn

2

Điều này có thể thực hiện thủ thuật Nó sẽ cảnh báo tất cả id của các phần tử có trùng lặp.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    	<head>
    		<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    		<script type="text/javascript">
    			function findDupes()
    			{
    			  var all = $("*");
    			  for(var i = 0; i < all.length; i++)
    			  {
    			      if (all[i].id.length > 0 && $("[id='" + all[i].id + "']").length > 1) alert(all[i].id);
    			  }
    			}
    		</script>
    	</head>
    	<body onload="findDupes()">
    		<div id="s"></div>
    		<div id="f"></div>
    		<div id="g"></div>
    		<div id="h"></div>
    		<div id="d"></div>
    		<div id="j"></div>
    		<div id="k"></div>
    		<div id="l"></div>
    		<div id="d"></div>
    		<div id="e"></div>
    	</body>
    </html>

Mở rộng đoạn mã

— Syed mohamed aladeen
nguồn

1

Tôi thích điều này vì nó đưa ra các yếu tố thực tế cho bảng điều khiển. Nó giúp điều tra những gì đang xảy ra dễ dàng hơn.

function CheckForDuplicateIds() {
var ids = {};
var duplicates = [];

$("[id]").each(function() {
    var thisId = $(this).attr("id");
    if (ids[thisId] == null) {
        ids[thisId] = true;
    } else {
        if (ids[thisId] == true) {
            duplicates.push(thisId);
            ids[thisId] = false;
        }
    }
});
if (duplicates.length > 0) {
    console.log("=======================================================");
    console.log("The following " + duplicates.length + " ids are used by multiple DOM elements:");
    console.log("=======================================================");
    $(duplicates).each(function() {
        console.warn("Elements with an id of " + this + ":");
        $("[id='" + this + "']").each(function() {
            console.log(this);
        });
        console.log("");
    });
} else {
    console.log("No duplicate ids were found.");
}
return "Duplicate ID check complete.";

}

— Burton
nguồn

Chức năng này cực kỳ hữu ích khi trình xác thực HTML tiện ích mở rộng Chrome được đề xuất không hoạt động đối với tôi, vì nó có thể phát hiện các id sao chép khi HTML mới được thêm vào trang.

— Giselle Serate,

1

Bạn có thể sử dụng giải pháp này, giải pháp này sẽ in ra trong bảng điều khiển một danh sách các id trùng lặp nếu có.

Bạn có thể chạy mã trực tiếp trong bảng điều khiển (sao chép / dán) sau khi bạn tải DOM và không yêu cầu phụ thuộc thêm như jQuery.

Bạn có thể sử dụng nó để nhanh chóng tìm ra các lỗi có thể xảy ra trong đánh dấu HTML của mình.

    (function (document) {
        var elms = document.body.querySelectorAll('*[id]'),
            ids = [];
        for (var i = 0, len = elms.length; i < len; i++) {
            if (ids.indexOf(elms[i].id) === -1) {
                ids.push(elms[i].id);
            } else {
                console.log('Multiple IDs #' + elms[i].id);
            }
        }
    })(document);

Một ví dụ:

https://jsbin.com/cigusegube/edit?html,console,output

(ở đây mã được thêm vào trước khi đóng body thẻ)

— GibboK
nguồn

0

Tôi đã tạo một chức năng nơi bạn có thể kiểm tra một phần tử cụ thể tìm kiếm các id trùng lặp trong hoặc toàn bộ trang:

function duplicatedIDs(container) {

    var $container  = container ? $(container) : $('body'),
        elements = {},
        duplicatedIDs = 0;
        totalIDs = 0;

    $container.find('[ID]').each(function(){
        var element = this;

        if(elements[element.id]){
            elements[element.id].push(element);
        } else  {
            elements[element.id] = [element];
        }
        totalIDs += 1;

    });

    for( var k in elements ){
        if(elements[k].length > 1){
            console.warn('######################################')
            console.warn('        ' + k )
            console.warn('######################################')
            console.log(elements[k]);
            console.log('---------------------------------------');
            duplicatedIDs += elements[k].length
        }
    }
    console.info('totalIDs', totalIDs);
    console.error('duplicatedIDs', duplicatedIDs);
}

duplicatedIDs('#element'); //find duplicated ids under that element
duplicatedIDs(); // entire page

— diegodafm
nguồn