jQuery Javascript：按类名获取元素不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15539245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Get element by class name not working
提问by Manoz
I am working on rich text editor and did well till now. I've made a separate .jsfile to use it as a plugin.
我正在研究富文本编辑器，到目前为止做得很好。我制作了一个单独的.js文件以将其用作插件。
Now i want to use this plugin by giving it a class name through .cshtmlfile.But it doesn't seem to work, i've searched for related answers and they said using document.getElementsByClassNamewill solve my problem.
现在我想通过文件给它一个类名来使用这个插件。但.cshtml它似乎不起作用，我已经搜索了相关的答案，他们说使用document.getElementsByClassName将解决我的问题。
Please go through this code and tell me what went wrong?
请检查此代码并告诉我出了什么问题？
Text editor .js-
文本编辑器 .js-
var richTextEditor = document.getElementsByClassName("text-editor");
richTextEditor.contentDocument.designMode = 'ON';
$('#strong').live('click', function () {
richTextEditor.contentDocument.designMode = 'ON';
richTextEditor.contentDocument.body.contentEditable = true;
richTextEditor.contentDocument.execCommand('bold', false, null);
richTextEditor.focus();
});
cshtml file-
cshtml 文件-
<script src="/js/Texteditor.js" type="text/javascript"></script>
<script src="/js/jquery.js" type="text/javascript"></script>
<div id="strong" class="command btn"><i class="icon-bold icon-black"></i></div>
<iframe id="edtNoteCreate" class="text-editor" name="DisplayNote" style="width:430px;height:150px;">@((Model.Note != null ? Model.Note : ""))</iframe>
回答by Ja?ck
Just take the first item of the matched nodes; it's a NodeList but can be dereferenced like an Array.
只取匹配节点的第一项；它是一个 NodeList，但可以像数组一样取消引用。
var richTextEditor = document.getElementsByClassName("text-editor")[0];
回答by Prasath K
getElementsByClassName returns an array so use like this
getElementsByClassName 返回一个数组，所以像这样使用
var richTextEditor = document.getElementsByClassName("text-editor");
richTextEditor[0].contentDocument.designMode = 'ON';
$('#strong').live('click', function () {
richTextEditor[0].contentDocument.designMode = 'ON';
richTextEditor[0].contentDocument.body.contentEditable = true;
richTextEditor[0].contentDocument.execCommand('bold', false, null);
richTextEditor[0].focus();
});
回答by Sangeeta
why dont you use jquery methods??
你为什么不使用jquery方法？？
var richTextEditor = document.getElementsByClassName("text-editor");
instead try this:
var richTextEditor = $(".text-editor"); //again this is going to return more than one object.
//so you can also try below code to manipulate in that.
var richTextEditor = $(".text-editor").first(); //for first element. similarly can use .last() or n-th child.
回答by Mr_Green
As you are using jQuery, why not stick with jQuery.
当您使用 jQuery 时，为什么不坚持使用 jQuery。
var richTextEditor = $('.text-editor').eq(0);
and also livemethod of jQuery is deprecated, use .on()instead.
并且live不推荐使用 jQuery 的方法，请.on()改用。
回答by zhicheng
$(".text-editor") returns HTMl object. “document.getElementsByClassName("text-editor")” returns array object.
$(".text-editor") 返回 HTMl 对象。“document.getElementsByClassName("text-editor")”返回数组对象。
