parent() 函数不起作用答案

【问题标题】：parent() function does not workparent() 函数不起作用
【发布时间】：2014-03-05 16:53:57
【问题描述】：

最近 - 我在 SO 上发布了这个问题：Highlight rows in a html table with selected value

我有一个生成的 html 表和一个 JS 函数，它应该突出显示具有相同单元格“coversationid”值的所有行

这里有一个关于 Fiddle 的例子，效果很好：http://jsfiddle.net/sa4ED/

但是，如果我将相同的代码应用于我的代码，它会突然停止工作，我似乎无法找出原因......

HTML/JSP（短版）：

<tbody>
    <c:forEach var="message" items="${messages}">
        <tr>
        <td class="time"><c:out value="${message.timestamp}" /></td>
        <td class="sender"><c:out value="${message.sender}" /></td>
        <td class="receiver"><c:out value="${message.receiver}" />
        </td>
        <td class="message"><c:out value="${message.shorterVersion()}" /></td>
        <td class="conversationid"><c:out value="${message.conversationid}" /></td>
        </tr>
    </c:forEach>
</tbody>

其他地方有链接触发高亮功能：

<a href="#"onclick="highlight('${message.conversationid}');">highlight</a>

JS：

function highlight(value) { 
    $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).parent().css('background', "red");
}

当我点击这个功能时，它什么也不做。

我知道 highlight 函数会被调用，如果我删除 parent() 部分，它会起作用，并且所有具有我想要的 conversationid 值的单元格都会被突出显示。但是，我希望整行突出显示。所以它在没有parent() 的情况下确实有效，但在没有它的情况下无效。

为什么？很明显，在 <td> 上调用的 parent() 应该返回父级 <tr> 在这种情况下，对吧？怎么了？非常感谢您在调试方面的任何帮助...

CSS（短版）：

table.pretty tbody tr.odd td {
    background: #FFFEFE;
}

table.pretty tbody td {
    text-align: left;
    background: #E1E9FF;
}

【问题讨论】：

我相信问题出在样式上，而不是代码上。也许您在 <td> 元素上有 background 规则，这些规则覆盖了您在父 <tr> 上设置的任何内容。
你能把你的例子弄个小提琴吗/
这可能是原因...我将在这里发布我的 CSS - 你能看一下吗？我认为它是这样工作的：最后一个触发的样式被应用，但它可能不会像那样工作......
@Smajl，样式规则优先级不是这里的罪魁祸首，元素覆盖率才是。由于为<td> 元素设置了背景，因此您为父<tr> 设置的任何背景都将不可见，因为它位于<td> 元素下方。您可能需要设置行中所有 <td> 元素的背景。
谢谢-这就是原因-如果您发布的答案是这样，我会接受它:-)

标签： javascript jquery html

【解决方案1】：

将td 背景更改为透明。

function highlight(value) { 
    $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).css('background','transparent').parent().css('background', "red");
}

【讨论】：

【解决方案2】：

试试这个

 $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).closest('tr').find('td').css('background', "red");

【讨论】：

【解决方案3】：

使用 parent().find('td') 而不仅仅是 parent()。您已经在 CSS 中声明了 td 背景颜色，它会覆盖 tr 的背景颜色。

function highlight(value) { 
    $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).parent().find('td').css('background', "red");
}

【讨论】：