更改 li 内 span 内内容的 css答案

【问题标题】：Change css of content inside span inside li更改 li 内 span 内内容的 css
【发布时间】：2013-02-08 23:00:09
【问题描述】：

我正在尝试在 jQuery Mobile 的列表视图中设置已读/未读消息的样式集。

                    <ul data-role="listview" data-theme="c" id="#messageList" style="padding-top:10%;">

                    <li data-icon="false">
                        <a href="#" onclick="messageClick()">
                         <p>
                            <span style="float:left;clear:left;font-weight: bold;text-decoration:underline;color:blue;white-space:pre-wrap; width:30ex">Some unread text</span>
                            <span style="float:right;font-weight: bold;">08/02/13</span>   
                         </p>
                        </a>
                    </li>
                    .....
                    </ul>

里面messageClick()我有：

function messageClick(){    
    $(this).findclosest("span").css("font-weight","normal");
}

但它似乎不起作用。我哪里错了？

【问题讨论】：

您似乎混淆了.closest() 和.find()。没有.findclosest 功能。在这种情况下，您希望.find() 搜索后代，closest() 搜索祖先。

标签： jquery css jquery-mobile html

【解决方案1】：

findclosest 不是函数。查看您的 javascript 控制台，我确定您遇到了错误。 this 也可能未设置为元素，而是设置为窗口，因为您在全局范围内调用它。您可能想要的更像是：<a href="#" class="messageClick">

和

$('#messagelist').on('click','a.messageClick', function() {
    $(this).parent().find('span').first().css(...);
    return false;
}

请注意，我去了父级然后找到第一个跨度。我这样做是因为块元素p 不能存在于a 中，因此不同的浏览器可能会以不同的方式对待它。我强烈建议使用类而不是内联样式，并基于这些类而不是一些随机的 DOM 层次结构进行定位。您的代码可能需要进行一些认真的清理工作！

【讨论】：

我的代码代码肯定使用了一些清理。我不太擅长 CSS，只是初学者。至于你的答案，这是有道理的，但不起作用。也许我在别处搞砸了。

【解决方案2】：

什么是findclosest() 它在 jQuery 文档中不存在。如果你想访问<li> 下的第一个跨度，这样的东西应该可以工作：

function messageClick(){    
    $(this).find("p > span:first").css("font-weight","normal");
}

如果您想更改两个跨度，您可以从选择器中删除:first，如果您没有多个跨度，甚至可以只使用$(this).find("span")。

【讨论】：

【解决方案3】：

你想要 find() 而不是 findclosest() - 这不存在：

function messageClick(){    
    $(this).find("span").css("font-weight","normal");
}

【讨论】：

【解决方案4】：

jQuery Mobile 不适用于 onclick="... 或 occhange="... 事件，它们与 jQM 页面事件触发冲突。

你应该手动绑定点击事件：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#messageList li a', function(){   
        $(this).find("span:first").css("font-weight","normal");
    });    
});

这是一个有效的 sjFiddle 示例：http://jsfiddle.net/Gajotres/Speu2/

【讨论】：

我认为它仅与 jQM 有关。你的小提琴很好用，但同样的东西在我的项目中不起作用。想知道为什么。

【解决方案5】：

您可能想使用 .find，因为我认为 .findclosest 不存在（.closest 确实存在但不是为此）

【讨论】：