在jquery插件中获取初始选择器 [英] Getting initial selector inside jquery plugin
问题描述
我之前得到了一些关于选择器的帮助,但我坚持以下。
I got some help earlier regarding selectors, but I'm stuck with the following.
假设你有这样的插件
$('#box').customplugin();
如何在插件中将#box作为字符串?
不确定这是否是正确的做法,任何其他解决方案都会很棒。
how can I get the #box as a string in the plugin? Not sure if that's the correct way of doing it, and any other solution would be great as well.
考虑到#box是一个选择下拉列表,
Considering #box is a select dropdown,
我遇到的问题是如果我做普通的javascript
The problem I'm having is if I do the regular javascript
$('#box').val(x);
选择了正确的选项值,
但如果我在插件中尝试相同的
but if i try the same inside a plugin
.....
this.each(function() {
var $this = $(this);
$this.val(x);
最后一个代码并没有真正做任何事情。
the last code doesn't really do anything.
我注意到我在定位#box里面遇到了麻烦插件,因为它是一个对象,而不是一个字符串......
I notice I'm having trouble targeting #box inside the plugin because it's a object and not a string...
任何帮助都将不胜感激。
Any help would be appreciated.
谢谢!
:输入我正在努力的代码以便更好地理解
: Putting in the code I'm working in for better understanding
(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;
}
推荐答案
**编辑**克雷格打败我** /编辑**
** edit ** Craig beat me to it ** /edit **
**编辑**
只是一个单挑:.selector()在jQuery 1.7中被弃用了在jQuery 1.9中删除: api.jquery.com/selector 。
- Simon Steinberger
** / edit **
** edit ** Just a heads-up: .selector() is deprecated in jQuery 1.7 and removed in jQuery 1.9: api.jquery.com/selector. – Simon Steinberger ** /edit **
使用 .selector
属性在jQuery集合上。
Use the .selector
property on a jQuery collection.
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 );
}
然而,以下内容可能解决了您的真实问题?
However this following probably solves your real question?
$.fn.customPlugin = function() {
// .val() already performs an .each internally, most jQuery methods do.
// replace x with real value.
this.val(x);
}
$("#box").customPlugin();
这篇关于在jquery插件中获取初始选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!