Question

我希望使用jquery在我的JavaScript代码中包含以下内容：

$('.attrs span:nth-child(1)').text() + ' | ' + $('.attrs span:nth- 
child(2)').text() + ' | ' + $('.attrs span:nth-child(3)').text() ...

尽管子级span元素的数量会发生变化，所以我像这样动态地对其进行处理：

      function getString(containerElem) {
            var str = '';
            for (var i = 0; i < containerElem.children().length; i++) {
                    ((i + 1) == containerElem.children().length) ? str += '$(\'.attrs span:nth-child('  + (i + 1) +  ')\').text()' : str += '$(\'.attrs span:nth-child('  + (i + 1) +  ')\').text() + \'  \' + ';
            }
            return str;
       }

当我将其返回为字符串时，jQuery也将无法使用，因为$现在也已经是字符串了，我可以使用某些标志或全局变量以某种方式添加到字符串中来进行此操作，即{{1} }取决于我的容器有多少个span元素？

Answer 1

您不需要知道自己有多少<span>，只需选择所有它们即可
$('.attrs span')。

然后，只需使用innerText获取其文本值，然后使用Array#join创建您的String：

let spans = $('.attrs span');

let result = spans.get().map(e => e.innerText).join(' | ');
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attrs">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

Answer 2

可以使用选择器作为参数来调用jQuery children方法，以将子列表限制为该选择器。这样，您可以找到所有SPAN的子元素，并在该元素列表上进行迭代以读取内部文本。

function getString(containerElem) {
  var str = '';

  containerElem.children('span').each(function(i, element) {
    str += jQuery(element).text();
  });

  return str;
}

console.log(getString(jQuery('.attrs')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attrs">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

返回与jQuery串联的动态字符串

2 个答案: