Select 以 OpenLayers 结尾的 ID 名称元素

Select element by id name ending on OpenLayers

我正在尝试 select 来自 OpenLayers 地图上 ID 的元素。我检查过元素 ID 是“OpenLares_Map_4_Openlayers_Container”,但数字有时会发生变化(4 到 8 或 10)。所以我试图 select 带有 jQuery 的元素和 select 或找到带有末端 (see this link) 的元素。

但这似乎不起作用。示例可以在 JSFiddle 中看到,代码如下 JavaScript:

// OSM
var osmLayer = new OpenLayers.Layer.OSM("OSM Map");

// Map
var map = new OpenLayers.Map('mapDiv', {
    layers: [osmLayer],
    center: new OpenLayers.LonLat(0, 0),
    zoom: 0
});

// All elements
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
    console.log('document.Elements: ' + i + ' -> ' + all[i].id)
}

// Select elements
var mapContainer = document.getElementById("OpenLayers_Map_4_OpenLayers_Container");
$("#tag1").text("    ->     "+mapContainer);
console.log('mapContainer: ' + mapContainer);

var id_OL_Container = $("div[id$='_OpenLayers_Container']");    // http://api.jquery.com/attribute-ends-with-selector/
$("#tag2").text("    ->     "+id_OL_Container);
console.log('id_OL_Container: ' + id_OL_Container);

有人知道 jQuery 有什么问题吗?

重要教训:在深入黑客攻击之前阅读 API 文档。您的整个解析逻辑可以替换为:

console.log('id_OL_Container: ' + map.layerContainerDiv.id);

这是一个工作的 JSFiddle demonstrates it in action


另一个重要的问题是为什么您认为您需要元素的 ID。通过不依赖于元素 ID 名称,您可以使代码更加简洁和可靠。您的 OpenLayers 代码不应与 DOM 关卡代码混合,以允许两者独立发展。