使用 jQuery 选择特定的 contenteditable div答案

【问题标题】：Selecting specific contenteditable divs with jQuery使用 jQuery 选择特定的 contenteditable div
【发布时间】：2013-11-07 18:58:35
【问题描述】：

给定以下 html 类型的博客文章编辑器：

<div class="entry">  
  <div class="title" contenteditable="true">
    <h2>Title goes here</h2>
  </div>
  <div class="content" contenteditable="true">
    <p>content goes here</p>
  </div>
</div>

我正在尝试使用 jquery 来选择 .title 和 .content div，以便为每个 div 附加唯一的事件处理程序。

$('[contenteditable]').on(...);

两者都适用，但

$('[contenteditable] .title').on(...);

或

$('.title').attr('contenteditable', 'true').on(...);

两者都不能选择特定的 contenteditable 块。

【问题讨论】：

contenteditable 属性不是布尔属性，因此理论上您应该选择一个特定的属性值：$('[contenteditable="true"]')。我想你的版本可能虽然有效。

标签： javascript jquery html css contenteditable

【解决方案1】：

您可以在 CSS .title[contenteditable="true"] 中使用属性选择器。

jsFiddle example

.title[contenteditable="true"] {
    background: red;
}

在 jQuery 中：$('.title[contenteditable]').css("background","red")

jsFiddle example

【讨论】：

无论是类还是元素，我都很擅长。对我来说 css class= 加分 :)

【解决方案2】：

对于第一个示例，您必须删除属性选择器和类选择器之间的空格，因为空格意味着后代。

$('[contenteditable].title').on("click", function(){
    $(this).css('color', 'orange'); 
});

示例：http://jsfiddle.net/2Bsk4/

【讨论】：