JQUERY 仅当它包含输入类型 = 文本（而不是输入类型 = 无线电）时才更改 TD 样式

Question

我应用了如下样式，对我来说效果很好：

$("td[id='cellId']").css("text-align", "left");

但是，如果 TD 包含文本框而不是单选按钮，我只需要将该样式应用于 TD。

我搜索了 hi 和 low，但是 find()、contains() 之类的似乎没有用。

Answer 1

使用 :has() 选择器匹配包含其他元素的元素。

$("td#cellId:has(:text)").css("text-align", "left");

Answer 2

首先请注意，您的 $("td[id='cellId']") 相当令人惊讶：我可能猜想您有一些包含小区 ID 的 var cellId，因此您应该使用 $('#' + cellId).

现在，由于您没有准确说明 td 中的（最终）嵌套元素，我们必须确保其中没有单选按钮。
无论如何，假设我们有 var cellElem 您已根据需要填充（可能如上所示）。

所以你可以这样使用：

if (!cellElem.find([type=radio]).length) {
    cellElemn.css(textAlign: 'left');
}

Answer 3

如果您需要过滤包含文本框而不是单选按钮的 TD-s，则需要使用 :has 和 :not 组合：

 $("td:not(:has(input[type='radio']))").has("input[type='text']").css("background", "red");

这是一个片段，其中已过滤的单元格具有红色背景。您可以对它们应用任何样式。

$("td:not(:has(input[type='radio']))").has("input[type='text']").css("background", "red");

td {
    border: 1px solid green;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tr>
  <td><input type="text">cell-1-1</td>
  <td><input type="radio">cell-1-2</td>
  <td><input type="text"><input type="radio">cell-1-3</td>
 </tr>
 <tr>
  <td><input type="radio">cell-2-1</td>
  <td><input type="text">cell-2-2</td>
  <td>cell-2-3</td>
 </tr>
</table>

JQUERY 仅当它包含输入类型 = 文本（而不是输入类型 = 无线电）时才更改 TD 样式

JQUERY Change TD style ONLY IF IT contains input type = text (and not input type=radio)

css

jquery

text

input

radio