javascript - 使用 jQuery 选择特定的 contenteditable div

Question

给定以下 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，以将唯一的事件处理程序附加到每个。

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

两者都适用，但

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

或者

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

两者都无法选择特定的 contenteditable 块。

Answer 1

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

jsFiddle 示例

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

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

jsFiddle 示例

Answer 2

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

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

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