如何更改不同子类的弹出窗口的宽度？

Question

<span class="grandparent"> 
     <span class='parent'> 
      <span id="popUP" class="child1"> 
       Some content for popUP 
      </span> <!-- 1st child has width of 390px--> 
     </span>  
    </span> 

现在对于不同的选项，比如说下面提到的子标签被替换为新的标签。

 option A) <span id="popUP" class="child2"></span> 
      <!-- 2nd child has popUP width of 550px--> 
    option B) <span id="popUP" class="child3"></span> 
      <!-- 3rd child has popUP width of 450px--> 
    option C) <span id="popUP" class="child4"></span> 
       <!-- 4th child has popUP width of 350px--> 

如何使用JavaScript或jQuery动态更改弹出窗口的宽度？我尝试使用.find()方法，但它没有运气

Answer 1

你不应该这样做吗？你的id和class是相反的。

option A) <span class="popUP" id="child2"></span> 
      <!-- 2nd child has popUP width of 550px--> 
option B) <span class="popUP" id="child3"></span> 
      <!-- 3rd child has popUP width of 450px--> 
option C) <span class="popUP" id="child4"></span> 
       <!-- 4th child has popUP width of 350px--> 

然后做这样的事情？

$("#child2").addClass("width2"); 

那么CSS

.width2 
{ 
width:550px; 
} 

考虑使用DIV。我读过的地方忽略标签。并发布整个代码可能会有所帮助。