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(...);

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

Answer 1

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

jsFiddle example

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

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

jsFiddle example

Answer 2

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

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

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

使用jQuery选择特定的contenteditable div

2 个答案: