How to select Divs with specific HTML content matching values?-HTML Tutorial-php.cn

How to select Divs with specific HTML content matching values?

WBOY

Release： 2023-08-23 15:53:17

forward

1434 people have browsed it

How to select Divs with specific HTML content matching values?

The division tag is also known as the div tag. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc. ). It is required to close the div tag, which has an opening (

) and closing (

) tag.

The Div element is the most useful in web development because it allows us to segment the data on the web page and create specific sections for different types of information or functionality.

Let's take a look at the following example to better understand how to select divs with specific HTML content that matches a value.

The Chinese translation of

Example

is:

Example

In the following example we are running the script to select divs that has specific HTML content.

<!DOCTYPE html>
<html>
   <body>
      <style>
         .cricketers {
            width: 100px;
         }
         .marked {
            background-color: #27AE60 ;
         }
      </style>
      <div class="cricketers">
         <div>MSD</div>
         <div> KOHLI </div>
         <div> YUVI </div>
         <div> SEHWAG </div>
         <div> SACHIN </div>
      </div>
      <script>
         const visited = ["MSD"]
         const monElement = document.querySelector('.cricketers')
         for (let i = 0; i < monElement.children.length; i++) {
            let cricketers = monElement.children[i].textContent; 4. How To Select Divs That Has A Specific HTML Content That Matches Values
            for (let v of visited) {
               if (v == cricketers) {
                  monElement.children[i].innerHTML += ' - selected';
                  monElement.children[i].classList.add("marked");
               }
            }
         }
      </script>
   </body>
</html>

Copy after login

When the script is executed, it generates an output consisting of the names used with the divs. One of the texts will be highlighted in green, indicating the selected div.

The Chinese translation of

Example

is:

Example

Execute the code below and observe that different parts are selected in different colors.

<!DOCTYPE html>
<html>
   <body>
      <style>
         td[data-content="female"] {
            color: #7D3C98;
         }
         td[data-content^="p" i] {
            color: #239B56 ;
         }
         td[data-content*="8"] {
            color: #DE3163;
         }
      </style>
      <div>
         <table>
            <tr>
               <td data-content="Jhon">Jhon</td>
               <td data-content="male">male</td>
               <td data-content="28">28</td>
            </tr>
            <tr>
               <td data-content="Sindhu">Sindhu</td>
               <td data-content="female">female</td>
               <td data-content="18">18</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Copy after login

After running the above script, the output window will pop up and display the selected text in different colors according to the conditions provided in the web page code.

The above is the detailed content of How to select Divs with specific HTML content matching values?. For more information, please follow other related articles on the PHP Chinese website!