Question

我的结构看起来像这样，

＆＃13;

$('#container').children().each(function() {
        var child = $(this).first();
        child.children().each(function() {
            console.log($(this).text() + '\nThis Should appear after each selectMe.text()');
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
        <div class='firstRows'>
            <div class='childOfFirstRow'>
                <div class='selectMe'>
                    First set of data
                </div>
                <div class='selectMe'>
                    Second set of data
                </div>
                <div class='selectMe'>
                    Third set of data
                </div>
                <div class='selectMe'>
                    Fourth set of data
                </div>
            </div>
        </div>
        <div class='firstRows'>
            <!-- Same data inside me too -->
        </div>
        <div class='firstRows'>
            <!-- Same data inside me too -->
        </div>
        <div class='firstRows'> 
            <!-- Same data inside me too -->
        </div>
    </div>

＆＃13;

这是我必须要做的。

遍历firstRows

container

对于container内的每一行，请将一个元素下移到childOfFirstRow
对于selectMe内的每个childOfFirstRow，请更改数据。

我遇到问题的是选择selectMe。出于某种原因，如果我试试这个，

$('#container').children().each(function() {
    $(this).first().children().each(function() {
        console.log($(this).text());
    });
});

这会立刻带回所有孩子。就像我做$(.childOfFirstRow).text();

我如何一次获得text()个selectMe的{{1}}，而不是一次全部获得？{/ p>

Answer 1

为避免混淆，只需使用选择器：

$('#container .firstRows .childOfFirstRow .selectMe').each(function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div class='firstRows'>
    <div class='childOfFirstRow'>
      <div class='selectMe'>
        First set of data
      </div>
      <div class='selectMe'>
        Second set of data
      </div>
      <div class='selectMe'>
        Third set of data
      </div>
      <div class='selectMe'>
        Fourth set of data
      </div>
    </div>
  </div>
  <div class='firstRows'>
    <!-- Same data inside me too -->
  </div>
  <div class='firstRows'>
    <!-- Same data inside me too -->
  </div>
  <div class='firstRows'>
    <!-- Same data inside me too -->
  </div>
</div>

Answer 2

您正在容器div中寻找孩子的孩子：

$('#container').children().each(function() {
    $(this).first().children().children().each(function() {
        console.log($(this).text());
    });
});

JS Fiddle Demo

Answer 3

您可以像这样使用.find()：

$('#container').children().each(function(){     
    // more code here...
    $(this).find(".selectMe").each(function(){  // Here, $(this) is a "firstRows" element.
        console.log($(this).text());            // Here, $(this) is a "selectMe" element.
        // more code here...
    });
    // more code here...
});

它会在selectMe的每个孩子的所有后代级别中找到所有带有#container级元素的元素。

---

我想这个想法是对每个selectMe“组”应用不同的处理方法，基于“firstRows它是一个后代... { 因为如果没有，这更简单：

$('#container').find(".selectMe").each(function(){
    // Do something
    console.log($(this).text());    // Here, $(this) is a "selectMe" element.
});

以下是展示它的示例代码：

$('#container').children().each(function(i,val){
	var j = i+1;
	console.log("firstRows id: "+$(this).attr("id"));
	// more code here...
	$(this).find(".selectMe").each(function(i,val){  // Here, $(this) is a "firstRows" element.
		var k=i+1;
		console.log($(this).text()+" - Original");            // Here, $(this) is a "selectMe" element.
		$(this).html("This element "+k+" of the firstRows "+j+" has changed!!!");
		console.log($(this).text());
		// more code here...
	});
	// more code here...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div id='container'>
	  <div class='firstRows' id="one">
		<div class='childOfFirstRow'>
		  <div class='selectMe'>
			First set of data
		  </div>
		  <div class='selectMe'>
			Second set of data
		  </div>
		  <div class='selectMe'>
			Third set of data
		  </div>
		  <div class='selectMe'>
			Fourth set of data
		  </div>
		</div>
	  </div>
	  <div class='firstRows' id="Two">
		<div class='childOfFirstRow'>
		  <div class='selectMe'>
			First set of data
		  </div>
		  <div class='selectMe'>
			Second set of data
		  </div>
        </div>
	  </div>
	  <div class='firstRows' id="Three">
		<!-- Same data inside me too -->
	  </div>
	  <div class='firstRows' id="Four">
		<!-- Same data inside me too -->
	  </div>
	</div>

Answer 4

你可以在普通的JS中做到这一点，甚至不需要jQuery。此外，它使逻辑更容易IMO。

var firstRows = document.querySelectorAll("div.firstRows");
for(var i = 0; i < firstRows.length; i++){
  var children = firstRows[i].children[0].children;
  //children[0] is the "childOfFirstRow" div so calling children on that is the list of all the divs under it
  for(var j = 0; j < children.length; j++){
    //optional if check here to see if children[i].getAttribute('class') === "selectMe" if that is not a sure thing
    children[i].innerHTML="Whatever you need to change it to";
  }
}

这假设这种嵌套和顺序很重要。否则只需使用此代码：

var children = document.querySelectorAll('div.selectMe');
for(var i = 0; i < children.length; i++){
  children[i].innterHTML = "";
}

Answer 5

您还可以单独互动每个级别：

$('#container .firstRows').each(function() {
    $(this).find('.childOfFirstRow').each(function() {
       $(this).find('.selectMe').each(function() {
          console.log($(this).text());
       });
    });
});

jsfiddle

如何循环嵌套三个级别的div的子项

5 个答案: