Question

这是HTML结构：

<div id="container">
    <div class="left-column">
    <div class="row">User 1:</div>
    <div class="row">User 2:</div>
    <div class="row">User 3:</div>
  </div>
  <div class="right-column">
    <div class="row">James</div>
    <div class="row">Jennifer</div>
    <div class="row">John</div>
  </div>
</div>

使用jQuery，我试图从上面的结构访问text（），以下列格式打印输出：

User 1:James
User 2:Jennifer
User 3:John

尝试：奇数＆amp; ：甚至父元素中的伪选择器但是徒劳无功。任何帮助表示赞赏。

Answer 1

这是一种简单的方法:(参见控制台中的输出）

var leftCol = document.getElementsByClassName("left-column")[0]
var rightCol = document.getElementsByClassName("right-column")[0]

var leftCells = leftCol.getElementsByClassName("row")
var rightCells = rightCol.getElementsByClassName("row")
for (var i = 0; i < leftCells.length; ++i) {
  console.log(leftCells[i].textContent, rightCells[i].textContent)
}

<div id="container">
  <div class="left-column">
    <div class="row">User 1:</div>
    <div class="row">User 2:</div>
    <div class="row">User 3:</div>
  </div>
  <div class="right-column">
    <div class="row">James</div>
    <div class="row">Jennifer</div>
    <div class="row">John</div>
  </div>
</div>

Answer 2

试试这个

var outputArr = [];
$( "#container" ).find( ".left-column row" ).each( function(){

   var thisValue = $( this ).html(); //value of the row in left column
   var index = $( this ).index(); // index of the row
   var otherRow = $( this ).parent().next().get( index ).html(); //value of the row in the right column by the same index

   console.log( thisValue + ":" + otherRow ); print the output on console
   outputArr.push( thisValue + ":" + otherRow );
} );

console.log( outputArr );

Answer 3

对一列使用map并使用回调中的索引从相应的列中获取文本

＆＃13;

var textArray = $('.left-column .row').map(function(index) {
  var rightText = $('.right-column .row:eq(' + index + ')').text();
  return $(this).text() + rightText;
});

console.log(textArray);

textArray.each(function() {
  $('body').append('<p>' + this + '</p>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
  <div class="left-column">
    <div class="row">User 1:</div>
    <div class="row">User 2:</div>
    <div class="row">User 3:</div>
  </div>
  <div class="right-column">
    <div class="row">James</div>
    <div class="row">Jennifer</div>
    <div class="row">John</div>
  </div>
</div>

＆＃13;

Answer 4

JS Fiddle

    let nav = self.navigationController?.navigationBar
    nav?.barStyle = UIBarStyle.Black
    nav?.tintColor = UIColor.yellowColor()
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height:40))
    imageView.contentMode = .ScaleAspectFit
    let image = UIImage(named: "NavBarPhoto")
    imageView.image = image
    navigationItem.titleView = imageView

var left = $('.left-column .row'),
  right = $('.right-column .row'),
  result = '';

for (var i = 0; i < left.length; i++) {
  result += $(left[i]).text() + $(right[i]).text() + '<br>';
}

$('#result').html(result);

Answer 5

我会这样做（参见控制台输出）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
  <div class="left-column">
    <div class="row">User 1:</div>
    <div class="row">User 2:</div>
    <div class="row">User 3:</div>
  </div>
  <div class="right-column">
    <div class="row">James</div>
    <div class="row">Jennifer</div>
    <div class="row">John</div>
  </div>
</div>
<hr>
<strong>Result:</strong>
<div id="result"></div>

$('.left-column .row').each(function(i){
    var $value = $('.right-column .row').eq(i);
    console.log($(this).text() + $value.text());
})

Answer 6

以不同的方式：

var $left = $('.left-column').find('div');
var $right = $('.right-column').find('div');

var result = $left.map(function(index, el) {
  return $(el).text() + $right.eq(index).text();
});

console.log(result.toArray().join('\n'));

User 1:James
User 2:Jennifer
User 3:John

如何访问相同索引级别但在不同父DIV中的两个元素？

6 个答案: