Jquery 更改边框颜色（如果是类）

如果第二个

类通过

.wcpv order status completed

完成，我试图更改表中第一个

的边框颜色

在一个包含两个

的页面上，如何仅针对订单状态已完成的页面

尝试使用jQuery和PHP if语句

$(document).ready(function(){
  $("tr:has(.wcpv-order-status-completed)").css("border", "solid green");
});

每个都是这样设置的。第二个td将更改wcpv订单完成状态或处理状态：

<tr>
   <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th>
   <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td>
   <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-completed">Gennemført</span></td>
   <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td>
   <td class="shipping_address column-shipping_address" data-colname="Shipping"></td>
   <td class="product_name column-product_name" data-colname="Product"><a class="post-edit-link" href="https://example.com/admin/123"</a></td>
   <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span></td>
   <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td>
   <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td>
   <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td>
</tr>

弗莱尔·德塔尔杰的Vis
根内姆弗特
2019年6月5日上午9:19
我创建了一个带有tr标签的页面，其中一些第二个td标签拥有您提到的类，而其他标签没有。最后，有一个按钮，用于验证哪些标记具有该类



睾丸
运输署{
宽度：100px；
文本对齐：居中；
}
第一个TD
第二个TD
第一个TD
第二个TD
第一个TD
第二个TD
第一个TD
第二个TD
第一个TD
第二个TD
试验
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“tr”）。每个（函数（）{
if（$（this）.find（“td”）.eq（1）.hasClass（“wcpv订单状态已完成”））{
$（this.find（“td”）.eq（0）.css（“边框”，“1px纯绿色”）；
}
});
});
});

第一个
在

在
tr
内选择第一个
td
：

highLightIfCompleted($table( {
  var $rows = $('tr');
  $rows.each(function(i,e) {
    var $row = $(e);
    var $firstTd = $row.find('td:eq(1)');
  });
}

如果第二次
通过
.wcpv订单状态完成类完成

检查第二个TD：

highLightIfCompleted($table( {
  var $rows = $('tr');
  $rows.each(function(i,e) {
    var $row = $(e);
    var $firstTd = $row.find('td:eq(0)');
    var $secondTd = $row.find('td.eq(1)');
    if ($secondTd.hasClass('wcpv-order-status-completed') {
      $secondTd.css("border", "solid green");
    }
  });
}

范例


函数highLightIfCompleted（）{
var$rows=$（'tr'）；
$rows.每个（函数（即，e）{
var$行=$（e）；
var$firstTd=$row.find（'td:eq（0）'）；
var$secondTd=$row.find（'td:eq（1）'）；
如果（$secondTd.hasClass（'wcpv-order-status-completed'））{
$firstTd.css（“边框”、“纯绿色”）；
}
});
}
设置超时（highLightIfCompleted，5000）
.wcpv订单状态已完成{
字体大小：粗体；
}

第1行第1单元
第1行第2单元
第1行第1单元
第1行第2单元
您可以稍微修改
：has（）
选择器：

$("tr:has(.wcpv-order-status-completed) td.order_id a").css("border", "solid green");

这将找到具有
.wcpv订单状态已完成的
。在该
中，给
订单id
链接一个绿色边框

也就是说，为了获得最大的效率，把它分成几块

$("tr").has(".wcpv-order-status-completed").find("td.order_id a").css("border", "solid green");

Per:

由于
：has（）
是jQuery扩展，而不是CSS规范的一部分，因此使用
：has（）
的查询无法利用本机DOM
querySelectorAll（）方法提供的性能提升为了在现代浏览器中获得更好的性能，请使用
$（“您的纯css选择器”）.has（选择器/doElement）
。

添加到您的代码中，看起来如下所示：


$（“tr”）.has（“.wcpv订单状态已完成”）.find（“td.order_id a”）.css（“边框”、“纯绿色”）

弗莱尔·德塔尔杰的Vis
完整的
2019年6月5日上午9:19
350丹麦克朗
乌贝塔特
0000-00-00 00:00:00
Opfyldt
弗莱尔·德塔尔杰的Vis
未完成
2019年6月5日上午9:19
350丹麦克朗
乌贝塔特
0000-00-00 00:00:00
Opfyldt
您需要更改
的第一个
的边界颜色，该
具有特定类别的其他
元素

$('tr').each((i, raw) => {

    $(raw).children('td.wcpv-order-status-completed').length > 0
       $(raw).children('td').first().css('background-color', 'red');

  });

如果您选择的
将是类中的
$（“tr.wcpv-order-status-completed”）
，即“选择任何具有类
wcpv订单状态已完成的
”即可。同样，如果您正在查找一个
包含类为
wcpv order status completed
的元素，那么
:has（）
就是这种情况。假设
tr
有一个类为
.wpcv…
$（“tr.wcpv-order-status-completed”）。css（“border”，“1px纯绿色”）编辑完你的问题后，我发现你包含的HTML标记最初丢失（已解析）。如果
边框包含一个带有特定类的
，则似乎希望该边框发生更改。鉴于这种认识，这将是
：has（）
的一种情况，尽管您的代码看起来不错。请提供问题的详细信息（即添加HTML）。如果检查，是否看到应用于
的样式？是否将
边框折叠：折叠应用于表格？否则，表的行边框将不会显示。@Fetz“仅检查tr是否具有该类”-这是不正确的。请参阅：“选择至少包含一个与指定选择器匹配的元素的元素。表达式
$（“div:has（p）”）
与
匹配，如果
存在于其子代中的任何位置”。显然，您在我创建答案时编辑了您的问题。我希望我的回答能有所帮助。别忘了你需要将边框宽度设置为，至少1px:）^这其实不是完全必要的：）我很好奇为什么支票在
setTimeout（）中？而且，我觉得使用
每个
按索引查找元素有点过分了
：has（）
放在一边，您可以使用诸如
nth-child（）
、
td:first
等选择器。@TylerRoper问题不清楚它是每行中的第一个td还是任何行中的第一个td。