Javascript 如果两个div类存在于TD中，jQuery将替换它们

我觉得我很接近这一点，但不是很接近。我根本不是jQuery和CSS方面的天才。
我的目标：在表格数据单元格中为日历函数动态构建div。输入由日期范围确定。我有一个蓝色的方块（CSS），用于安排完整的工作日。对于部分的一天，我根据上午或下午创建一个三角形区域（同样是CSS）。
问题：上午和下午重叠。
到目前为止我得到的：

有人能告诉我jQuery选择器/替换项中缺少了什么吗？
HTML:

<table>
<tbody>
    <tr>
        <td>
            morning:<br/>
            <div class="morning"></div>
        </td>
        <td>
            afternoon:<br/>
            <div class="afternoon"></div>
        </td>
        <td>
            split day:<br/>
            <div class="morning"></div>
            <div class="afternoon"></div>
        </td>
    </tr>
</tbody>

Javascript:

.morning{width:0;height:0;border-bottom:60px solid transparent;border-left:94px solid #0066CC;font-size:0;line-height:0;}
.afternoon{width: 0; height: 0;border-bottom: 1px solid transparent;border-top: 59px solid transparent;border-right: 95px solid #0066CC;font-size: 0;line-height: 0;}
.fullDay{border:30px;border-color:#0066CC;border-style:solid;height:0;width:32px;float:left;color:#FFFFFF;margin-left:2px;}
.splitDay{line-height:0%;width:0px;border-top:60px outset #0066CC;border-right: 100px dashed #0066CC;}

jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
    $(".morning").addClass('splitDay').removeClass('morning');
    $(".afternoon").remove();
    }

---

}))

是的，非常接近，你正在检查这个案子是否存在。但您需要确保只处理与您的案例匹配的行。为此，将case元素设置为一个变量，然后通过仅操纵该变量，您只需修改

拆分日

元素，而不是页面上的所有元素

jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
    var splitday = $("td:has(div.afternoon):has(div.morning)");

    splitday.find(".morning").addClass('splitDay').removeClass('morning');
    splitday.find(".afternoon").remove();
    }
});

范例

---

是的，很接近你，你正在检查案件是否存在。但您需要确保只处理与您的案例匹配的行。为此，将case元素设置为一个变量，然后通过仅操纵该变量，您只需修改

拆分日

元素，而不是页面上的所有元素

jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
    var splitday = $("td:has(div.afternoon):has(div.morning)");

    splitday.find(".morning").addClass('splitDay').removeClass('morning');
    splitday.find(".afternoon").remove();
    }
});

范例

---

jQuery的问题是，您正在使用

$（“.morning”）

和

$（“.morning”）

创建一个全新的选择器，这些选择器将在整个html中搜索包含这些类的div。要找到正确的选项，您需要保存您的if选择器，然后使用

。稍后在其上查找
，如下所示：

jQuery(document).ready(function ($) {
    var $splitdays = $("td:has(div.afternoon):has(div.morning)");
    if ($splitdays) {
    $splitdays.find(".morning").addClass('splitDay').removeClass('morning');
    $splitdays.find(".afternoon").remove();
    }
});

jQuery的问题在于，您正在使用
$（“.morning”）
和
$（“.morning”）
创建一个全新的选择器，这些选择器将在整个html中搜索包含这些类的div。要找到正确的选项，您需要保存您的if选择器，然后使用
。稍后在其上查找
，如下所示：

jQuery(document).ready(function ($) {
    var $splitdays = $("td:has(div.afternoon):has(div.morning)");
    if ($splitdays) {
    $splitdays.find(".morning").addClass('splitDay').removeClass('morning');
    $splitdays.find(".afternoon").remove();
    }
});

可以只切换行上的类…然后为
.splitday.morning
和
设置规则。splitday.午后
进行css调整可以只切换行上的类…然后为
.splitday.morning
和
设置规则。splitday.午后
进行css调整这两个答案都是正确的。很抱歉，我只是选择了第二个，因为这是我回来时看到的第一个。两个答案都是正确的。很抱歉，我只是选择了第二个，因为这是我回来时看到的第一个。