Question

我需要从一个数组项中获取ID的子div，这也恰好是一个div。我想这样做的原因是我想编辑子divs＆＃39;样式属性以编程方式。此外，还会有多行，这就是为什么我有一个数组。

说我有以下HTML。

<div class="row fileCompareTreeRow">
  <div class="col-xs-8"> </div>
  <div class="col-xs-4" id="progressBarDiv">
    <div ng-if="(node.pass != null)" class="pull-right">
        <div id="progressBarText"></div>
        <div id="progressbarCont"></div>
    </div>
 </div>
</div>

我想找到id为＃34; progressBarDiv＆＃34;的div。以下是我编写的JavaScript代码，试图让它工作。

var rows = document.getElementsByClassName("fileCompareTreeRow");
for (var i = 0; i < rows.length; i++){
  var row = rows[i];
  var rowHeight = $(row).height();
  if(rowHeight > 20){
    var div =  $(row).find("div#progressBarDiv");
    div.style.margin = "0 auto";
    div.style.padding = "10px";
  }
}

我一直收到错误，指出我无法更改＆＃39; undefined＆＃39;的margin属性。意思是没有找到div。我已经尝试过这样做，并尝试以不同的方式绕过它，但我无法管理。有谁可以帮助我吗？提前致谢！ :)

Answer 1

只需选择$("#progressBarDiv")即可。 ID必须在DOM中是唯一的，因此这必然会提供所需的元素。

然后使用jQuery的方法，而不是vanilla的方法（你在这里处理jQuery对象）：$("#progressBarDiv").css("padding", "10px")。

这就是说，我可以看到ng-if，这意味着你同时使用Angular ...和jQuery。（还有像document.getElementsByClassName这样的vanilla JS选择器......）这很糟糕。这真的很糟糕。使用Angular并以Angular方式执行操作， OR 使用jQuery并以jQuery方式执行操作，但不能同时执行这两种操作。

Answer 2

你可以.css（）或.addclass（）

$(row).find("div#progressBarDiv").css('margin','0 auto');
$(row).find("div#progressBarDiv").css('padding','10px');

或者

.progressBarDivCSS
{
margin: 0 auto;
padding: 10p;
}

$(row).find("div#progressBarDiv").addClass('progressBarDivCSS');

Answer 3

使用Jquery .css()：请参阅下面的代码段：

var rows = $(".fileCompareTreeRow");
for (var i = 0; i < rows.length; i++){
  var row = rows[i];
  var rowHeight = $(row).height();
  if(rowHeight > 20){
    var div1 =  $(row).find("div#progressBarDiv");
    console.log(div1)
    $(div1).css("margin","0 auto");
    $(div1).css("padding", "10px");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row fileCompareTreeRow">
  <div class="col-xs-8"> </div>
  <div class="col-xs-4" id="progressBarDiv">
    <div ng-if="(node.pass != null)" class="pull-right">
        <div id="progressBarText">s</div>
        <div id="progressbarCont">s</div>
    </div>
 </div>
</div>
<br>
<div class="row fileCompareTreeRow">
  <div class="col-xs-8"> </div>
  <div class="col-xs-4" id="progressBarDiv">
    <div ng-if="(node.pass != null)" class="pull-right">
        <div id="progressBarText">s</div>
        <div id="progressbarCont">s</div>
    </div>
 </div>
</div>

或者只是使用将样式应用于所有目标div的后续Jquery代码

$(".fileCompareTreeRow").find("div#progressBarDiv").css({"margin":"0 auto","padding":"10px"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row fileCompareTreeRow">
  <div class="col-xs-8"> </div>
  <div class="col-xs-4" id="progressBarDiv">
    <div ng-if="(node.pass != null)" class="pull-right">
        <div id="progressBarText">s</div>
        <div id="progressbarCont">s</div>
    </div>
 </div>
</div>
<br>
<div class="row fileCompareTreeRow">
  <div class="col-xs-8"> </div>
  <div class="col-xs-4" id="progressBarDiv">
    <div ng-if="(node.pass != null)" class="pull-right">
        <div id="progressBarText">s</div>
        <div id="progressbarCont">s</div>
    </div>
 </div>
</div>

Answer 4

我找到解决此问题的最佳方法是使用纯JavaScript。我们可以使用querySelector来获取父项child元素within。代码将是

var rows = document.getElementsByClassName("fileCompareTreeRow");
for (var i = 0; i < rows.length; i++){
  var row = rows[i];
  var rowHeight = $(row).height();
  if(rowHeight > 20){
    var div =  row.querySelector('#progressBarDiv');
    div.style.margin = "0 auto";
    div.style.padding = "10px";
  }
}

querySelector将查看变量row所包含的元素中的元素，并且您不会收到the margin attribute of 'undefined'

之类的错误

为了您的简单，这里有工作JSFIDDLE

JQuery - 在数组中的项目（也是div）中查找子div

4 个答案: