在jQuery插件中获取初始选择器

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

早些时候,我在选择器方面得到了一些帮助,但我还是坚持了以下几点。

假设你有这样一个插件

$('#box').customplugin();

我如何在插件中得到#框作为字符串?不确定这是否是正确的方法,任何其他的解决方案也将是很好的。

考虑到#框是一个选择下拉列表,

我遇到的问题是如果我做常规的javascript

$('#box').val(x);

选择正确的选项值,

但是如果我在插件里面尝试同样的方法

.....
this.each(function() {
var $this = $(this);


$this.val(x);

最后一段代码实际上什么也做不了。

我注意到我很难瞄准插件中的#框,因为它是一个对象而不是字符串...

谢谢

编辑::为了更好地理解,我正在工作的代码:

(function($){
$.fn.customSelect = function(options) {
    var defaults = {
        myClass : 'mySelect'
    };
    var settings = $.extend({}, defaults, options);


    this.each(function() {
        // Var          
        var $this = $(this);
        var thisOpts = $('option',$this);
        var thisSelected = $this[0].selectedIndex;
        var options_clone = '';

        $this.hide();

        options_clone += '<li rel=""><span>'+thisOpts[thisSelected].text+'</span><ul>'
        for (var index in thisOpts) {
            //Check to see if option has any text, and that the value is not undefined
            if(thisOpts[index].text && thisOpts[index].value != undefined) {
                options_clone += '<li rel="' + thisOpts[index].value + '"><span>' + thisOpts[index].text + '</span></li>'
            }
        }
        options_clone += '</ul></li>';

        var mySelect = $('<ul class="' + settings.myClass + '">').html(options_clone); //Insert Clone Options into Container UL
        $this.after(mySelect); //Insert Clone after Original

        var selectWidth = $this.next('ul').find('ul').outerWidth(); //Get width of dropdown before hiding
        $this.next('ul').find('ul').hide(); //Hide dropdown portion

        $this.next('ul').css('width',selectWidth);

        //on click, show dropdown
        $this.next('ul').find('span').first().click(function(){
            $this.next('ul').find('ul').toggle();
        });

        //on click, change top value, select hidden form, close dropdown
        $this.next('ul').find('ul span').click(function(){
            $(this).closest('ul').children().removeClass('selected');
            $(this).parent().addClass("selected");
            selection = $(this).parent().attr('rel');
            selectedText = $(this).text();
            $(this).closest('ul').prev().html(selectedText);
            $this.val(selection); //This is what i can't get to work
            $(this).closest('ul').hide();
        });

    });
    // returns the jQuery object to allow for chainability.
    return this;
}
提问于
用户回答回答于

使用.selectorjQuery集合的属性。

var x = $( "#box" );
alert( x.selector ); // #box

在你的插件中:

$.fn.somePlugin = function() {

    alert( this.selector ); // alerts current selector (#box )

    var $this = $( this );

    // will be undefined since it's a new jQuery collection
    // that has not been queried from the DOM.
    // In other words, the new jQuery object does not copy .selector
    alert( $this.selector );
}

但是,这下面可能解决你真正的问题?

$.fn.customPlugin = function() {
    // .val() already performs an .each internally, most jQuery methods do.
    // replace x with real value.
    this.val(x);
}

$("#box").customPlugin();

热门问答

快照容量与费用的比例?如何关闭停用?

帅的惊动我国计算机大神
推荐已采纳
快照已于2019年1月22日0时启动正式商业化进程,商业化后所有存量快照和新产生的快照将根据快照使用的存储容量进行收费。 在快照商业化后,腾讯云仍旧会在国内主要地域为用户提供一定量的免费额度。免费额度策略如下: 免费额度覆盖范围为中国大陆地域,中国香港及海外地域暂无免费快照额...... 展开详请

调用离线语音识别时,回调接口的出口ip段是多少?

119.29.107.245
111.230.13.15
119.29.159.28
119.29.33.205
119.28.82.202
139.199.60.156

系统盘可以快照和恢复吗?具体步骤是?

系统盘也可以进行快照,也可以恢复。就在快照云硬盘那里创建即可。 云硬盘控制台:https://console.cloud.tencent.com/cvm/cbs 再点击里面的“创建快照”即可。 1.jpg 创建后可以在快照控制台处理快照:https://console.clou...... 展开详请

红包消息如何构建?

红包消息的话,与@消息类似,可以通过 TIMCustomElem 来实现。需要应用在UI上做相应的特殊处理,比如检查到当前消息为红包消息后,消息展示为红包的样式。 另外,红包消息作为重要消息,最好在发送消息的时候将其设置为高优先级消息,以最大程序保证消息在触达频率限制的情况下仍可...... 展开详请

AVChatRoom和ChatRoom有什么区别?

面向的应用场景不同 ChatRoom适用于群组规模中等(不超过数千人级别)、成员进出不太频繁(每秒十几个人进出)的场景;AVChatRoom是专门为了大型直播设计的,适用于人数众多(万级以上)、成员进出频繁(每秒数百人以上进出)的场景。 AVChatRoom的优点 支持人数无上限...... 展开详请

serverless函数如何支持跨域?

解决跨域的方式有几种: 1. 如果不像自行解决跨域问题,且没有处理 http header 方法的问题,可以在 API 网关中,针对 API 配置,不选择 ANY 方法,而且仅选择非 header 的方法,然后勾选启用 CORS,由 API 网关协助解决跨域。完成配置后记得保存并...... 展开详请

所属标签

扫码关注云+社区