/empty selector trong JQuery
Các hàm built-in06/10/2023

empty selector trong JQuery

Lựa chọn empty Selector “:empty” là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử không có nội dung (bao gồm cả các nút văn bản). Đây là ngược lại của “:parent”, tức là nó lựa chọn các phần tử không có con.

1. Cú pháp

Lựa chọn empty Selector “:empty” có mục đích chọn các phần tử không có nội dung (bao gồm cả văn bản).

Cú pháp

$(":empty")

Hoặc

jQuery(":empty")

Kết quả trả về

  • Kết quả trả về là danh sách các phần tử mà không có nội dung, bao gồm cả các nút văn bản.

Phiên bản hỗ trợ

  • empty Selector “:empty” đã được thêm vào jQuery từ phiên bản 1.0.
empty selector trong JQuery

2. Một số ví dụ

2.1. Dùng empty Selector để đổi màu phần tử trong bảng

Trong ví dụ dưới đây, sử dụng empty Selector trong thư viện Jquery để đổi màu các phần tử trong bảng.

Tạo một bảng với ô trống ngẫu nhiên, và khi người dùng kích vào ô trống, ô đó sẽ đổi màu nền:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Empty Cell Highlighter</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid black;
      padding: 10px;
      text-align: center;
    }
    td.empty {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Generate a 5x5 table with some empty cells
      var table = $('<table></table>');
      for (var i = 0; i < 5; i++) {
        var row = $('<tr></tr>');
        for (var j = 0; j < 5; j++) {
          var cell = $('<td></td>');
          if (Math.random() < 0.3) {
            cell.addClass('empty');
          }
          cell.click(function() {
            $(this).toggleClass('empty');
          });
          row.append(cell);
        }
        table.append(row);
      }

      // Append the table to the body
      $('body').append(table);
    });
  </script>
</head>
<body>
  <h1>Click on empty cells to toggle background color</h1>
</body>
</html>

2.2. Dùng empty Selector tạo game đi tìm ô trống không

Ví dụ dưới đây là nâng cấp của ví dụ trước, sử dụng empty Selector trong thư viện Jquery để tạo game game đi tìm ô trống trong bảng với các cell có kích thước ngẫu nhiên và không có border. Người dùng nhấn nút “Find Empty Cells” để bắt đầu trò chơi:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Table with Empty Cell Highlight</title>
  <style>
    table, th, td {
      border: none;
      padding: 10px;
      text-align: center;
      margin-bottom: 10px;
    }

    td.found-empty {
      background-color: yellow;
      border: 1px solid black;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var emptyCellCount = 0;
    var totalEmptyCells = 0;

    function generateRandomData(rows, cols) {
      var data = [];
      totalEmptyCells = 0;

      for (var i = 0; i < rows; i++) {
        var rowData = [];
        for (var j = 0; j < cols; j++) {
          var rowspan = Math.floor(Math.random() * 3) + 1; // Random rowspan (1-3)
          var colspan = Math.floor(Math.random() * 3) + 1; // Random colspan (1-3)
          // Randomly decide if the cell is empty (50% chance)
          if (Math.random() < 0.5) {
            rowData.push({ value: '', rowspan, colspan });
            totalEmptyCells++;
          } else {
            // Generate some random data
            rowData.push({ value: '(' + i + '-' + j + ')', rowspan: 1, colspan: 1 });
          }
        }
        data.push(rowData);
      }
      return data;
    }

    function createTable(rows, cols, data) {
      var table = $('<table></table>');
      for (var i = 0; i < rows; i++) {
        var row = $('<tr></tr>');
        for (var j = 0; j < cols; j++) {
          var cellData = data[i][j];
          var cell = $('<td></td>').text(cellData.value);
          if (cellData.value === '') {
            cell.addClass('empty');
          }
          if (cellData.rowspan > 1) cell.attr('rowspan', cellData.rowspan);
          if (cellData.colspan > 1) cell.attr('colspan', cellData.colspan);
          cell.click(function() {
            var $this = $(this);
            if ($this.hasClass('empty')) {
              $this.toggleClass('found-empty');
              emptyCellCount += ($this.hasClass('found-empty') ? 1 : -1);
              $('#emptyCount').text(emptyCellCount);

              if (emptyCellCount === totalEmptyCells) {
                alert('Congratulations! You found all empty cells.');
                $('table').remove();
              }
            }
          });
          row.append(cell);
        }
        table.append(row);
      }
      return table;
    }

    $(document).ready(function() {
      $('#findEmptyCells').click(function() {
        // Remove any existing tables
        $('table').remove();
        emptyCellCount = 0;
        $('#emptyCount').text(emptyCellCount);

        // Generate random data
        var rows = Math.floor(Math.random() * 10) + 1; // Random number of rows (1-10)
        var cols = Math.floor(Math.random() * 10) + 1; // Random number of columns (1-10)
        var data = generateRandomData(rows, cols);

        // Create and append the table to the body
        var table = createTable(rows, cols, data);
        $('body').append(table);
      });
    });
  </script>
</head>
<body>
  <button id="findEmptyCells">Find Empty Cells</button>
  <div>Empty Cell Count: <span id="emptyCount">0</span></div>
</body>
</html>

Trong phiên bản này, chúng tôi đã thêm lớp found-empty và điều chỉnh CSS để khi tìm thấy cell trống, nó sẽ được đổi màu thành màu vàng. Biến đếm chỉ được cập nhật khi người dùng chọn một ô trống mới và được giữ sau khi người dùng nhấn nút “Find Empty Cells”.

Related posts