Question

我是jQuery的新手，我正在开发一个插件（供我自己使用），用于设置带有ajax调用返回的内容的DOM元素html()。例如：

<span id="a" class="scalar">?</span>
<span id="b" class="scalar">?</span>
<span id="c" class="scalar">?</span><!-- this will not be updated -->

如果stats.php将返回这样的JSON对象：{ a : 3, b : 7 }生成的HTML将是（每个对象属性将匹配调用插件的选择中的id ）：

<span id="a" class="scalar">3</span>
<span id="b" class="scalar">7</span>
<span id="c" class="scalar">?</span><!-- this will not be updated -->

这是插件调用和定义。问题是：为什么find()无法正确选择要更新的元素？

<script type="text/javascript">
   $(document).ready(function() {
      $('.scalar').scalar({ url : '../REST/stats.php' });
   });
</script>

(function($) {

    $.fn.scalar = function(options) {

        var opt = $.extend({
            url : 'REST/stats.php',
            type : 'POST',
            context: this,
            dataTypeString : 'json'
        }, options);

        $.ajax($.extend(opt, {
            success : function(obj) {
                for(k in obj) {
                    if(!obj.hasOwnProperty(k)) continue;
                    console.log(this.find('#' + k));
                }
            }
        }));

        return this.each();
    };

})(jQuery);

Answer 1

因为find查找后代元素，并且您要查找的元素不是后代（它们都是彼此的兄弟）。请改用filter：

console.log(this.filter('#' + k));

this将是一个包装一组DOM元素的jQuery对象。除非这些元素中的一个或多个包含id的后代元素，否则它将无效find。您需要查看元素本身，这是filter的作用。

jQuery无法在插件中找到（）？

1 个答案: