Question

我有像

这样的HTML

<a href="/blabla" class="matchupLink">
    <span class="teams"> USA</span>
    <span class="teams">Brazil</span>
</a>

我想通过班级＆＃39;团队＆＃39;来获取元素的HTML。在班级＆＃39; matchupLink＆＃39;

我试过

$('.matchupLink').each(function (index, obj) {
  var teams = $(this).find('.teams');
  console.log(teams.html())
});

但是这只返回每个.teams类中.matchupLink类的第一个实例。所以这里它只返回美国，而不是巴西。

我想计算每个teams类中matchupLink类都有多少个字符。因为如果characterCount＆gt; = 20，我想显示省略号。

我该怎么办？

由于

Answer 1

您可以将选择器与类

组合使用

$('.matchupLink .teams')

这将返回一个带有“团队”类的对象数组。

<强>更新

Here's a fiddle that prints to the console the length

$('.matchupLink .teams').each(function(index, item){
    var $item = $(item);
    var teamNameLength = $item.html().length;
    console.log($item.html() + ' length is: ' + $item.html().length);
    // if ($item.html().length >= 20){
    //     ::do logic for ellipses::
    // }
});

**请注意美国打印出的值为4，因为您的示例中有一个空格。

更新2

Fiddle alerting the length of both teams

要获得两个团队的长度，请在循环外部创建一个变量并适当增加它。

var lengthOfBothTeams = 0;

$('.matchupLink .teams').each(function(index, item){
    lengthOfBothTeams += $(item).html().length;
});   

alert('Length of both team names is: ' + lengthOfBothTeams);

Answer 2

console.log将适用于示例

中集合中的第一个匹配项

你应该遍历团队而不是匹配

$('.matchupLink .teams').each(function () {
  console.log($(this).html())
});

Answer 3

html()仅返回jQuery对象中第一个匹配元素的HTML内容。使用each()迭代元素并显示其HTML内容。

$('.matchupLink .teams').each(function (index, obj) {
  console.log($(this).html());
});

获得1个班级内2个班级的内容

3 个答案: