Question

打击选择器问题，并希望有人有一些见解。上下文是我正在开发一个Mediawiki扩展，它将一些企业特定功能添加到编辑页面。最新的GA MediaWiki包含JQuery 1.11.3。

在这个片段中，我试图添加一个包含动态创建的表的部分。大多数代码都在工作，所以我有信心JQuery在环境中充分加载。导致警报语句的选择器（如果可搜索则尝试查找文本框）不起作用。文本框确实显示在页面上，IE和Edge都显示ID，如注释中所示。选择器始终为零长度。我想知道我错过了什么。这是我处理各种引用语法的方式吗？您可以看到我试图通过使用数组源而不是我想要使用的JSON源来简化“源”方面，因此如果您尝试测试，请使用“Charl”作为测试短语。

function addProviders(subjectType, data) {
var title = mw.config.get("wgTitle");
var html = '<div class="mw-portwizard-sourcelist" id = "mw-portwizard-sourcelist"></div>';

if (!$('#mw-portwizard-sourcelist').length) {
    $(".templatesUsed").after (html);
}

html = '<div tabindex="0" id="mw-portwizard-sourcelistcontent" class="mw-editfooter-toggler mw-icon-arrow-expanded ui-widget" role="button"><p>Sources available for this page:</p></div>';
$('#mw-portwizard-sourcelist').html(html);
html =  '<table id="mw-portwizard-sourcetable"><tbody></tbody></table>';
$('#mw-portwizard-sourcelistcontent').html(html);

var tbody = $("#mw-portwizard-sourcetable").children('tbody');
var table = tbody.length ? tbody : $("#mw-portwizard-sourcetable");
mw.log ("table:" + table);
//TODO: use jquery data to hold the type
//html += '<input type="hidden" value="' + type +'" name="mw-portwizard-sourcetype" id="mw-portwizard-sourcetype" />';

//TODO: Make this WORK!
$.each(data, function(index,value) {
    var html = "<tr id='" + value.PortWizard.id +"-row'><td>" + value.PortWizard.url + "</td><td>" + (value.PortWizard.searchable ? '<input type="text" id="' + value.PortWizard.id +'-text" value="' + title + '">' : title) + "</td></tr>";
    table.append(html);

    if (value.PortWizard.searchable) {
        $selector = "#" + value.PortWizard.id + "-text";
//      $selector = "#en.wikipedia.org-text";en.wikipedia.org-text
        $prompt = $selector + ":" + $($selector).length; 
        alert ($prompt);
        $($selector).autocomplete({ 
/*            source: function(request, response) { 
                     new mw.Api().get( {
                        action: 'PortWizard',
                        provider: value.PortWizard.id,
                        subjectType: 'search',
                        query: request.term                         
                  }).done( function (data){
                      response(data);
                  });
            },*/
            source: ["Charles De Gaulle Airport", "Charlie Brown"],
            minLength :3
        });
    });
}

html += "<button type=\"button\" onclick=\"getPageContent(event,'" + subjectType + "')\">Get Text</button>";

$('#mw-portwizard-sourcelist').append(html);

}

谢谢，

杰森

Answer 1

根据jQuery的selectors文档，您需要使用两个反斜杠.

来转义\\.

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为名称的字面部分，必须用两个反斜杠逃脱：\。例如，一个元素 id =“foo.bar”，可以使用选择器$（“＃foo \ .bar”）。

所以而不是

$selector = "#" + value.PortWizard.id + "-text";

你应该把它改成这个

$selector = "#" + value.PortWizard.id.replace(/\./g, "\\\\."); + "-text";

Answer 2

在选择器中使用元字符不是一个好主意。 @Griffith已经正确地展示了如果它们确实存在于选择器中如何处理它们。作为替代方案，您可以使用#<id>形式而不是使用选择器[id=<id>]，并引用值<id>，如下所示：

$('[id="en.wikipedia.org"]')......

在构造选择器字符串时，您可以轻松完成这项工作：

$selector = "[id='" + value.PortWizard.id + "-text']";

＆＃13;

$('[id="en.wikipedia.org"]').html(function(_, html) {
    return html + ' FOUND';
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="en.wikipedia.org">TESTING</div>

＆＃13;

JQuery选择器找不到ID

2 个答案: