如何为第二个主div元素添加class类

Got it, let's walk through how to add a class to that second main <div> inside your <td id="tdCase"> element. Here are three reliable approaches depending on your use case:

1. Directly Edit the HTML (Simplest Option) #

If you have access to the original HTML code, just add the class attribute directly to the second div. Your modified code would look like this:

<td id="tdCase" colspan="4" rowspan="2"> 
  <div style="width: 100px;" unselectable="on"> 
    <div style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" class=" nicEdit-panelContain" unselectable="on"> </div> 
    <div> </div> 
  </div> 
  <!-- Added class attribute here -->
  <div class="your-custom-class" style="width: 100px; border-color: currentcolor rgb(204, 204, 204) rgb(204, 204, 204); border-style: none solid solid; border-widt..."> </div>
</td>

Just replace your-custom-class with the actual class name you want to use.

2. Dynamic Addition with Vanilla JavaScript #

If you need to add the class programmatically (e.g., on page load or after an event), use native JS to target the element:

// Target the second top-level div inside the td with id "tdCase"
const targetDiv = document.querySelector('#tdCase div:nth-of-type(2)');
// Add your class
targetDiv.classList.add('your-custom-class');

The :nth-of-type(2) selector specifically picks the second <div> that's a direct child of #tdCase, which is exactly the element you're targeting.

3. Using jQuery (If Your Project Uses It) #

If jQuery is already part of your stack, this one-liner will do the trick:

// :eq(1) targets the second element (jQuery uses 0-based indexing)
$('#tdCase div:eq(1)').addClass('your-custom-class');

Remember, jQuery's :eq() selector starts counting from 0, so eq(1) grabs the second div.

内容的提问来源于stack exchange，提问作者srinivas challa