返回与 jQuery 连接的动态字符串

Question

我想在我的javascript代码中使用jquery：

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

虽然子元素的数量会发生变化，所以我像这样动态地处理它：

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 将无法工作，因为$现在也是一个字符串，我可以使用一些标志或全局变量以某种方式添加到字符串中，即$.getString() + $.getString2()...取决于我的容器有多少跨度元素？

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

可以使用选择器作为参数调用 jQuerychildren方法，以将子项列表限制为该选择器。这样你就可以找到所有子元素，即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>