Question

<div class="pm-dialog">
   <div class="pm-dialog-close">
      <div class="colors-main-content"><span>&times;</span></div>
   </div>
   <div class="pm-dialog-inner colors-main-content" style="margin: 12px 15px 0px 15px;">
      <div>
         <div class="pm-dialog-content">
            <div id="selectLocationProfilePopup">
            </div>
         </div>
         <div class="pm-dialog-footer">
            <div>
               <div class="pm-dialog-footer-background"></div>
               <div class="pm-dialog-buttonpane"></div>
            </div>
         </div>
      </div>
   </div>
</div>

我有一个定义为pm-dialog-inner的类，它有一个display：table-row 我可以用一行来表达：$(".pm-dialog-inner > div").css("display", "block")但这不是我想要的我想基于其在选择器中的ID设置div的样式（因为我需要覆盖上面的样式），如下所示：

我使用Jquery在javascript中的代码如下所示：

$('#selectLocationProfilePopup').parent().parent().parent().find(".pm-dialog-inner > div").css("display", "block");

你能告诉我我做错了吗？你能重构上面的代码吗？
提前谢谢。

Answer 1

尝试：

$('#selectLocationProfilePopup').closest(".pm-dialog-inner").find("div:eq(0)").css("display", "block");

Answer 2

我已经为您的HTML提供了标识，这非常混乱，请验证它是否正确。

<div class="pm-dialog">          
    <div class="pm-dialog-close">        
        <div class="colors-main-content"><span>&times;</span></div>         
    </div>           
    <div class="pm-dialog-inner colors-main-content" style="margin: 12px 15px 0px 15px;">        
        <div>
            <div class="pm-dialog-content">
                <div id="selectLocationProfilePopup">
                    <div></div>
                </div>              
                <div class="pm-dialog-footer">
                    <div>                             
                        <div class="pm-dialog-footer-background"></div>                    
                        <div class="pm-dialog-buttonpane"></div>                     
                    </div>                   
                </div>                
            </div>              
        </div>
    </div>   
</div>

使用这个结构我已经使用了下面的代码，它运行正常，请测试并告诉你是否想要这个结果。

$("#selectLocationProfilePopup").parents(":eq(1)").css("display", "block"); 

$("#selectLocationProfilePopup").parent().find(".pm-dialog-footer").children("div").css("display", "block");

Answer 3

你可以这样做

<div class="pm-dialog" />
   <div class="pm-dialog-close">
      <div class="colors-main-content"><span>&times;</span></div>
   </div>
<div class="pm-dialog-inner colors-main-content" style="margin: 12px 15px 0px 15px;">
<div class="pm-dialog-inner colors-main-content pre_content">
  ';        
   <div>
     -> I want to set this style div                 
     <div class="pm-dialog-content ">
        <div id="selectLocationProfilePopup"> content text goes here </div>
     </div>
  </div>
     <div class="pm-dialog-footer">
     <div class="pre_content">
        <div class="pm-dialog-footer-background"></div>
        <div class="pm-dialog-buttonpane"> -> I want to set this div style.
        </div>
     </div>
  </div>
  </div>
</div>

在上一个div中添加一个类..然后选择除了类中包含“footer”的div之外的所有div。

    $('div.pre_content div').not('div[class*=footer]').css('background-color','red');

然后，一旦你正确过滤它们，你可以将你的CSS设置为任何东西。

http://jsfiddle.net/aZpGU/

找到孩子DIV并设定他们的风格

3 个答案: