角度干扰jqueryfind

你好

我有一些javascript代码，其中我尝试使用jQuery find（）方法对包含一个名为gridfooter的类的div元素应用一些样式，一旦页面呈现

以下是网格页脚的预呈现HTML：

<div ng-if="messages != null && messages.length > 0" class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

我的问题是gridfooter类的div的样式不像gridheader/gridcontent

但是，当我从预呈现的HTML中删除angular ng if指令时：

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
  <div class="panel">
    <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
    <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
    <div class="gridfooter">..</div>
  </div>
</div>

<div class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

...

然后使用gridfooter设置呈现的div的样式

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
    <div class="panel">
        <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
        <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
        <div class="gridfooter" style="color: red; border: 1px solid red;">..</div>
    </div>
</div>

..
..
..

我认为这不起作用的原因是：。这个问题的答案涉及事件委托

我是否正确地假设ng if处理程序是在运行时绑定的，因此.gridfooter不存在

如果是这样，我不能100%确定如何解决这个问题

有什么建议吗

蒂亚

---

coson

您应该使用

ng class

将样式应用于元素。除了在指令中之外，并排使用JQuery代码不是一个好的实践

ngClass指令允许您在 通过数据绑定表示所有类的表达式来创建HTML元素 待补充

---

您可以计算任何表达式，然后将该类应用于您的元素。

为什么不编写css<代码>$（'#message grid.panel'）.children（）.css（{…}）相当于cssalso中的

#message grid.panel>*{…}

，您是对的，jquery代码在运行时执行一次，每次角度输出更改标记时都必须重新调用（我猜），但事件委派是基于事件的，因此您必须在角度回调上运行该代码（不知道是否存在这些回调）@Alex-thechildren（）.css（{}）只是想看看我是否可以应用一种样式。我计划在解决问题后将其移除。

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
    <div class="panel">
        <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
        <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
        <div class="gridfooter" style="color: red; border: 1px solid red;">..</div>
    </div>
</div>