如果前 4 个孩子符合要求，则显示特定文本，使用 Jquery
Posted
技术标签:
【中文标题】如果前 4 个孩子符合要求，则显示特定文本，使用 Jquery【英文标题】：Display specific texts if the first 4 children meet the requirements, with Jquery 【发布时间】：2019-05-16 04:52:21 【问题描述】：我有一个包含多行和多列的表格。我想要的是：如果 5 个孩子中的前 4 个有特定的班级，那么将特定的文本附加到另一个 div。否则，不是。我被这段代码困住了。任何帮助将不胜感激：
$('table > tbody tr').each(function()
var counter = 0;
var ccc;
$('td.form a:nth-child(1), td.form a:nth-child(2), td.form a:nth-child(3),td.form a:nth-child(4)').each(function()
if(( $(this).hasClass("form-win") ) || ( $(this).hasClass("form-loss") ))
$(this).css('background','red');
counter++;
ccc = $(this).closest('tr.team_rank').find('td.team a').text();
$('results').append(ccc);
else
$(this).css('background','blue');
);
);
我也更新了我的笔，以可视化表格： https://codepen.io/tudor-taranu/pen/gZrmKR
$('table > tbody tr').each(function()
var counter = 0;
var ccc;
$('td.form a:nth-child(1), td.form a:nth-child(2), td.form a:nth-child(3),td.form a:nth-child(4)').each(function()
if(( $(this).hasClass("form-win") ) || ( $(this).hasClass("form-loss") ))
$(this).css('background','red');
counter++;
ccc = $(this).closest('tr.team_rank').find('td.team a').text();
$('results').append(ccc);
else
$(this).css('background','blue');
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="leaguetable sortable table detailed-table" id="page_competition_1_block_competition_tables_7_block_competition_league_table_1_table" data-round_id="48876">
<thead>
<tr class="sub-head">
<th title="Loc" class="sortasc sortdefaultasc">#
</th>
<th class="text team sortdefaultasc">team
</th>
<th class="form nosort">last 5
</th>
</tr>
</thead>
<tbody>
<tr class="odd team_rank" id="team_rank_row_1824" data-team_id="1824">
<td class="rank rank-light-green">1
</td>
<td class="text team large-link">
<a title="CFR Cluj">CFR Cluj
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="CFR Cluj - Gaz Metan Mediaş 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win" title="Dinamo Bucureşti - CFR Cluj 0 - 3" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="CFR Cluj - Voluntari 5 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Concordia Chiajna - CFR Cluj 0 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="CFR Cluj - Dunărea Călăraşi 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_25281" data-team_id="25281">
<td class="rank rank-light-green">3
</td>
<td class="text team large-link">
<a title="Universitatea Craiova">Universitatea …
</a>
</td>
<td class="form">
<a class="form-icon form-win" title="Universitatea Craiova - Voluntari 3 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Concordia Chiajna - Universitatea Craiova 1 - 3" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Universitatea Craiova - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-loss" title="Botoşani - Universitatea Craiova 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw last" title="Universitatea Craiova - Sepsi 1 - 1">D
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_13720" data-team_id="13720">
<td class="rank rank-light-green">4
</td>
<td class="text team large-link">
<a title="Viitorul">Viitorul
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="FCSB - Viitorul 2 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Gaz Metan Mediaş - Viitorul 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win" title="Viitorul - Dinamo Bucureşti 4 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Voluntari - Viitorul 1 - 2" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="Viitorul - Concordia Chiajna 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_1827" data-team_id="1827">
<td class="rank rank-light-green">5
</td>
<td class="text team large-link">
<a title="Gaz Metan Mediaş">Gaz Metan Mediaş
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="CFR Cluj - Gaz Metan Mediaş 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-draw" title="Gaz Metan Mediaş - Viitorul 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="FCSB - Gaz Metan Mediaş 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Dinamo Bucureşti - Gaz Metan Mediaş 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win last" title="Gaz Metan Mediaş - Voluntari 2 - 0">W
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_37490" data-team_id="37490">
<td class="rank rank-orange">10
</td>
<td class="text team large-link">
<a title="Hermannstadt">Hermannstadt
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="Hermannstadt - Dinamo Bucureşti 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="Voluntari - Hermannstadt 2 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-win" title="Hermannstadt - Concordia Chiajna 2 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Dunărea Călăraşi - Hermannstadt 0 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="Hermannstadt - Botoşani 1 - 1">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_1775" data-team_id="1775">
<td class="rank rank-orange">11
</td>
<td class="text team large-link">
<a title="Dinamo Bucureşti">Dinamo Bucureşti
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="Hermannstadt - Dinamo Bucureşti 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="Dinamo Bucureşti - CFR Cluj 0 - 3" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Viitorul - Dinamo Bucureşti 4 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Dinamo Bucureşti - Gaz Metan Mediaş 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-draw last" title="Dinamo Bucureşti - FCSB 1 - 1">D
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_9221" data-team_id="9221">
<td class="rank rank-orange">12
</td>
<td class="text team large-link">
<a title="Dunărea Călăraşi">Dunărea Călăraşi
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Politehnica Iași - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Dunărea Călăraşi - Astra 1 - 2" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Universitatea Craiova - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Dunărea Călăraşi - Hermannstadt 0 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw last" title="CFR Cluj - Dunărea Călăraşi 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_9088" data-team_id="9088">
<td class="rank rank-orange">13
</td>
<td class="text team large-link">
<a title="Concordia Chiajna">Concordia Chiajna
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Concordia Chiajna - Politehnica Iași 3 - 6" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Astra - Concordia Chiajna 3 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Concordia Chiajna - Universitatea Craiova 1 - 3" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Hermannstadt - Concordia Chiajna 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss last" title="Concordia Chiajna - CFR Cluj 0 - 1">L
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_11607" data-team_id="11607">
<td class="rank rank-orange">14
</td>
<td class="text team large-link">
<a title="Voluntari">Voluntari
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Universitatea Craiova - Voluntari 3 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-win" title="Voluntari - Hermannstadt 2 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-loss" title="CFR Cluj - Voluntari 5 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Voluntari - Viitorul 1 - 2" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss last" title="Gaz Metan Mediaş - Voluntari 2 - 0">L
</a>
</td>
</tr>
</tbody>
</table>
<br>
<div class="results">RESULT:
</div>【问题讨论】：
您没有检查特定行的单元格。除此之外，您的具体要求是什么并不完全清楚 如果你在看笔，我想要这个：如果前 4 个孩子是最后一个 TD 的红色，那么从中间追加文本，在外部 DIV 中。我知道我做错了什么，但我不知道是什么 只是为了澄清：对于所有行，如果前 4 个孩子是“红色”，不管他们是 W、D 还是 L，然后在结果中显示该团队的名称DIV?...如果有多个这样的行，结果 DIV 中要显示多个名称？ 是的，没错。如果前 4 个为红色，则在外部 div 中显示结果如下：RESULTS: TEAM 1, TEAM 2, TEAM 3, ETC。红色表示 W 或 L，没有 D 【参考方案1】：这是我对您的问题的解决方案：在每个 tr 中，您必须检查每个 form-icon 是否具有 form-win 或 form-loss（您的红色）类，如果有，则在计数器中添加 +1。如果计数器达到 4，则您知道前 4 个 form-icon 是红色的，您可以将该团队添加到 results div。
这是脚本，为了更好地理解所有注释（我尝试使用您已经编写的代码）：
$('table > tbody tr').each(function ()
var counter = 0; /* reset counter to every tr loop */
var ccc = $(this).closest('tr.team_rank').find('td.team a').text(); /* put in ccc the name of team every tr */
$(".form-icon", $(this)).each(function ()
if ($(this).hasClass("form-win") || $(this).hasClass("form-loss"))
counter++ /*if a form-icon has the class form-win or form-loss (the red ones) add +1 to counter */
else
return false; /* if those classes there aren't exit from loop */
if (counter == 4)
$('.results').append(ccc + ", "); /*if the counter is equals to 4 add the team to .result div */
);
);
这就是正在运行的脚本。
$('table > tbody tr').each(function ()
var counter = 0; /* reset counter to every tr loop */
var ccc = $(this).closest('tr.team_rank').find('td.team a').text(); /* put in ccc the name of team every tr */
$(".form-icon", $(this)).each(function ()
if ($(this).hasClass("form-win") || $(this).hasClass("form-loss"))
counter++ /*if a form-icon has the class form-win or form-loss (the red ones) add +1 to counter */
else
return false; /* if those classes there aren't exit from loop */
if (counter == 4)
$('.results').append(ccc + ", "); /*if the counter is equals to 4 add the team to .result div */
);
);
/* This script removes last ', ' from your teams's string. You can remove it, if you don't need it */
$('.results').text(function (_, txt)
return txt.slice(0, -2);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="leaguetable sortable table detailed-table" id="page_competition_1_block_competition_tables_7_block_competition_league_table_1_table" data-round_id="48876">
<thead>
<tr class="sub-head">
<th title="Loc" class="sortasc sortdefaultasc">#
</th>
<th class="text team sortdefaultasc">team
</th>
<th class="form nosort">last 5
</th>
</tr>
</thead>
<tbody>
<tr class="odd team_rank" id="team_rank_row_1824" data-team_id="1824">
<td class="rank rank-light-green">1
</td>
<td class="text team large-link">
<a title="CFR Cluj">CFR Cluj
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="CFR Cluj - Gaz Metan Mediaş 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win" title="Dinamo Bucureşti - CFR Cluj 0 - 3" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="CFR Cluj - Voluntari 5 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Concordia Chiajna - CFR Cluj 0 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="CFR Cluj - Dunărea Călăraşi 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_25281" data-team_id="25281">
<td class="rank rank-light-green">3
</td>
<td class="text team large-link">
<a title="Universitatea Craiova">Universitatea …
</a>
</td>
<td class="form">
<a class="form-icon form-win" title="Universitatea Craiova - Voluntari 3 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Concordia Chiajna - Universitatea Craiova 1 - 3" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Universitatea Craiova - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-loss" title="Botoşani - Universitatea Craiova 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw last" title="Universitatea Craiova - Sepsi 1 - 1">D
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_13720" data-team_id="13720">
<td class="rank rank-light-green">4
</td>
<td class="text team large-link">
<a title="Viitorul">Viitorul
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="FCSB - Viitorul 2 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Gaz Metan Mediaş - Viitorul 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win" title="Viitorul - Dinamo Bucureşti 4 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Voluntari - Viitorul 1 - 2" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="Viitorul - Concordia Chiajna 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_1827" data-team_id="1827">
<td class="rank rank-light-green">5
</td>
<td class="text team large-link">
<a title="Gaz Metan Mediaş">Gaz Metan Mediaş
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="CFR Cluj - Gaz Metan Mediaş 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-draw" title="Gaz Metan Mediaş - Viitorul 2 - 2" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="FCSB - Gaz Metan Mediaş 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Dinamo Bucureşti - Gaz Metan Mediaş 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-win last" title="Gaz Metan Mediaş - Voluntari 2 - 0">W
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_37490" data-team_id="37490">
<td class="rank rank-orange">10
</td>
<td class="text team large-link">
<a title="Hermannstadt">Hermannstadt
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="Hermannstadt - Dinamo Bucureşti 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="Voluntari - Hermannstadt 2 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-win" title="Hermannstadt - Concordia Chiajna 2 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-win" title="Dunărea Călăraşi - Hermannstadt 0 - 1" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-draw last" title="Hermannstadt - Botoşani 1 - 1">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_1775" data-team_id="1775">
<td class="rank rank-orange">11
</td>
<td class="text team large-link">
<a title="Dinamo Bucureşti">Dinamo Bucureşti
</a>
</td>
<td class="form">
<a class="form-icon form-draw" title="Hermannstadt - Dinamo Bucureşti 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-loss" title="Dinamo Bucureşti - CFR Cluj 0 - 3" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Viitorul - Dinamo Bucureşti 4 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw" title="Dinamo Bucureşti - Gaz Metan Mediaş 1 - 1" style="background: blue none repeat scroll 0% 0%;">D
</a>
<a class="form-icon form-draw last" title="Dinamo Bucureşti - FCSB 1 - 1">D
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_9221" data-team_id="9221">
<td class="rank rank-orange">12
</td>
<td class="text team large-link">
<a title="Dunărea Călăraşi">Dunărea Călăraşi
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Politehnica Iași - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Dunărea Călăraşi - Astra 1 - 2" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Universitatea Craiova - Dunărea Călăraşi 1 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Dunărea Călăraşi - Hermannstadt 0 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-draw last" title="CFR Cluj - Dunărea Călăraşi 0 - 0">D
</a>
</td>
</tr>
<tr class="odd team_rank" id="team_rank_row_9088" data-team_id="9088">
<td class="rank rank-orange">13
</td>
<td class="text team large-link">
<a title="Concordia Chiajna">Concordia Chiajna
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Concordia Chiajna - Politehnica Iași 3 - 6" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Astra - Concordia Chiajna 3 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Concordia Chiajna - Universitatea Craiova 1 - 3" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Hermannstadt - Concordia Chiajna 2 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss last" title="Concordia Chiajna - CFR Cluj 0 - 1">L
</a>
</td>
</tr>
<tr class="even team_rank" id="team_rank_row_11607" data-team_id="11607">
<td class="rank rank-orange">14</td>
<td class="text team large-link">
<a title="Voluntari">Voluntari
</a>
</td>
<td class="form">
<a class="form-icon form-loss" title="Universitatea Craiova - Voluntari 3 - 1" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-win" title="Voluntari - Hermannstadt 2 - 0" style="background: red none repeat scroll 0% 0%;">W
</a>
<a class="form-icon form-loss" title="CFR Cluj - Voluntari 5 - 0" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss" title="Voluntari - Viitorul 1 - 2" style="background: red none repeat scroll 0% 0%;">L
</a>
<a class="form-icon form-loss last" title="Gaz Metan Mediaş - Voluntari 2 - 0">L
</a>
</td>
</tr>
</tbody>
</table>
<br>
<div class="results">RESULT:
</div>【讨论】：
以上是关于如果前 4 个孩子符合要求，则显示特定文本，使用 Jquery的主要内容，如果未能解决你的问题，请参考以下文章