Question

我想更改每行中每列的innerHTML，但我无法让它正常工作。

＆＃13;

 var numOfRows = $('.wrap').children('.row').length;
 for (var i = 0; i < numOfRows; i++) {
   var $firstDiv = $(".input_fields_wrap .row:eq(0)");
   $firstDiv.text("Works");
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>
</div>

＆＃13;

我怎样才能正确地解决这个问题并更改每一行中每列的innerHTML？

Answer 1

您可以使用:first-child选择器

选择所有父元素的第一个子元素。

要使用索引，您可以使用.text(function) / .html(function)

$('.wrap .row .col-md-4:first-child').text(function(i) {
  return 'Changed Text: ' + (i+1);
});

＆＃13;

$('.wrap .row .col-md-4:first-child').text(function(i) {
  return 'Changed Text: ' + (i+1);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>
</div>

＆＃13;

Answer 2

请跟贝拉一样。

$( ".row div:first-child").text("Some text")

Answer 3

你也可以使用这样的东西：

$('.row').each(function(i) {
$(this).children().first().text('changed '+i);
});

演示：https://jsfiddle.net/c1hcL26m/

Answer 4

在.row上执行循环，找到第一个div并更改文本。使用以下逻辑

$(".wrap .row").each(function(i){
  $(this).find('div:eq(0)').text("Changed "+ i );     
});

这是一个工作代码段

＆＃13;

$(".wrap .row").each(function(i){
  $(this).find('div:eq(0)').text("Changed "+ i );
  $(this).find('div:eq(0)').css('background-color','yellow'); //demo purpose
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
    <div class="col-md-4">
      DONT CHANGE
    </div>
  </div>
</div>

＆＃13;

Answer 5

更新

我现在理解OP的请求是仅更改第一列的内容。使用此选择器模式，我们能够准确地定位所需的元素。 .each()的使用允许我们遍历每个目标并修改内容并为每个目标提供唯一的数字。

 var firstCols = $('div > div > div:first-of-type')

这个选择器说：

找到第一个孩子div的div ...



... div（妈妈），div必须......



...还有一个div父母（奶奶）。

<小时/>

OLD

每行的每列等于所有单元格，或者使用此Bootstrap布局，它将表示所有div.col-md-4。我注意到＆＃34; CHANGE＆＃34;和＃34;不要改变＆＃34;模式，这是你真正想要的吗？

 $('.col-md-4').html('NEW CONTENT');

段

＆＃13;

var firstCols = $('div > div > div:first-of-type');
firstCols.each(function(idx, obj) {
  $(this).html('ROW' + (idx + 1)).css('background', 'cyan');
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
      <div class="col-md-4">
        DONT CHANGE
      </div>
    </div>
  </div>


</body>

</html>

＆＃13;

Answer 6

javascript方法

document.querySelectorAll('.row div:first-child').forEach(function(r){r.innerHTML = "MYchangedtext"})

Answer 7

试试这个

 $(".wrap .row .col-md-4:first-child").text("Hello world!");

更改每行中每个第一列的innerhtml

7 个答案:

更新

OLD

段