jQuery獲取元素中元素的ID

Question

抱歉，我的問題還不夠明確。 div中的某些g元素是svg元素組。 看看這里的小提琴 。 因此，分組允許title和跨多個對象的CSS。 當有人單擊任何SVG對象時，我希望top獲得父對象g的ID。

---

我的html包含一個div（ id="svg-container" ），其中包含大量帶有各自ID的SVG元素。

我在頁面加載時設置了一個事件偵聽器，該事件偵聽器偵聽容器div（ svg-container ）上的click事件，並且我想提取SVG對象的ID（如果已單擊）。

HTML：

<div id="svg-container">
   <g id="svg1">...</g>
   <g id="svg2">...</g>
   <g id="svg3">...</g>
....
</div>

Answer 1

你可以試試這個嗎？

$('#svg-container').bind('click', function(event) {
    alert(event.target.id);
 });

Answer 2

將處理程序附加到g元素：

$('#svg-container').on('click', 'g', function(e) {
  e.stopPropagation();
  console.log(this.id);
});

 $('#svg-container').on('click', 'g', function(e) { e.stopPropagation(); console.log(this.id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="svg-container"> <svg id="world-map" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="998 -261 1610.2 1055.2" xml:space="preserve" enable-background="new 998 -261 1610.2 1055.2"> <g class="oceania new-zealand" id="new-zealand"> <title>New Zealand</title> <path d="M2559.9,582.6L2551.4 553.9 2547.7 553.4 2549.4 573.6 2547.2 582.7 2538.2 589.4 2538.7 597.2 2538.7 605.7 2541.2 608.7 2565.9 587.4 2565.9 582.6 z"></path> <path d="M2505.9,618.4L2480.7 629.4 2481.9 634.2 2495.7 640.9 2510.9 626.9 2519.9 625.7 2521.2 619.1 2534.4 606.2 2529.7 597.2 z"></path> </g> <g class="oceania indonesia" id="indonesia"> <title>Indonesia</title> <path d="M2276.6,324.4L2268.9 319.5 2267.6 311.8 2223.9 273.9 2223.4 277.9 2234.9 297.3 2238.1 297.3 2262.4 337.4 2271.9 338.4 z"></path> <path d="M2337.9,304.9L2331.9 292.9 2331.2 285.7 2332.2 283.5 2340.2 277.8 2329.7 270.2 2327.4 265.9 2322.4 275.2 2313.4 284.9 2300.6 294.4 2301.1 300.4 2294.6 300 2292.9 300 2289.6 300.9 2295.4 323.3 2304.2 324.3 2315.7 328.7 2315.7 333 2320.9 332 2328.7 321.4 2328.7 312.7 2332.9 303.9 z"></path> <path d="M2355.2,323.2L2352.7 318.7 2360.4 312.9 2358.7 310.4 2351.2 315.4 2349.2 315.4 2345.4 309.9 2346.7 307.5 2352.9 304.5 2362.2 307.4 2364.9 307.3 2371.9 300.7 2369.2 297.8 2362.7 302.8 2358.4 302.8 2352.2 299.8 2347.7 299.9 2342.7 308 2339.4 322 2337.9 327.5 2341.7 332.3 2339.2 339.4 2339.2 340.7 2344.9 340.7 2346.9 322.9 2348.7 323.4 2351.9 339.5 2355.2 340.4 2358.2 333.5 z"></path> <path d="M2305.9,350L2291.9 346.7 2275.9 343.3 2271.4 346.4 2272.4 349.2 2287.1 352.5 2294.6 353.9 2297.9 357.3 2306.4 357.9 2310.4 361.4 2314.2 360.4 2317.4 357.4 2311.2 354.5 z"></path> <path d="M2320.9,359.9L2323.2 362.3 2328.4 360.3 2324.7 357.9 z"></path> <path d="M2336.9,358.7L2335.2 356.2 2330.9 356.4 2331.7 359.5 2335.4 360.5 z"></path> <path d="M2335.4,365.4L2339.7 368.9 2342.9 368.9 2340.2 364.8 z"></path> <path d="M2345.2,359.5L2343.2 357.9 2341.4 359.3 2340.4 361.3 2347.9 362.4 2353.9 359 2350.4 358 z"></path> <path d="M2365.9,360.4L2357.4 367.7 2358.2 369.5 2361.9 368.9 2366.2 364.9 2374.7 363.7 2372.9 360.8 z"></path> <path d="M2330.9,257.9L2341.7 246.2 2337.4 239.9 2335.9 242.7 2335.2 246 2327.2 256.4 2327.7 258.4 z"></path> <path d="M2356.4,238.2L2350.7 235.9 2350.4 244.4 2353.7 247.5 2354.7 253.7 2357.9 254.4 2359.4 250.5 2356.9 248.8 z"></path> <path d="M2364.2,246L2363.4 239.5 2359.4 239.3 2359.4 246.8 2361.2 249.7 z"></path> <path d="M2365.9,240.7L2368.9 240.7 2368.4 233.9 2365.2 231.9 2361.4 232.7 2364.4 236.8 z"></path> <path d="M2372.9,251.9L2367.4 248 2367.9 252.9 2362.4 257.5 2357.7 258 2352.7 263.4 2352.9 265.9 2357.4 264.4 2360.7 262.4 2363.4 269.4 2368.4 272.8 2370.4 272 2372.2 269.9 2368.4 266 2370.7 264.3 2373.2 266.4 2374.9 263.4 2373.2 259.9 z"></path> <path d="M2345.2,226.2L2347.9 224.2 2352.9 224.9 2353.9 229.4 2357.7 229.7 2359.4 227.3 2357.2 224.2 2354.4 221.5 2348.7 220.9 2345.4 215.9 2349.2 210.4 2349.4 205.8 2346.9 199.7 2340.9 198.2 2336.4 201.3 2335.9 211 2342.9 224.4 z"></path> <path d="M2343.2,227.4L2344.4 232 2346.9 233.5 2348.4 231.4 2345.9 227.9 z"></path> </g> <g class="oceania southern-australia" id="southern-australia"> <title>Southern Australia</title> <path d="M2340.4,464.4L2340.4 506.1 2353.9 504.7 2372.2 510.2 2370.9 517.6 2373.4 524.9 2387.2 522.4 2387.9 526.1 2378.9 532.7 2381.9 535.2 2388.4 532.7 2386.7 552.9 2399.4 562.6 2401.9 561.7 2401.9 464.4 z"></path> </g> <g class="oceania papua-new-guinea" id="papua-new-guinea"> <title>Papua New Guinea</title> <path d="M2383.2,310.3L2385.4 305.9 2386.7 304.4 2384.4 301.9 2381.2 300.8 2379.7 295.9 2376.4 303.7 2381.4 310.3 z"></path> <path d="M2392.4,322.4L2389.7 321.4 2382.7 322.9 2380.7 325 2382.4 327.9 2386.9 326.3 2389.7 324.5 2393.9 327.9 2395.7 326.4 z"></path> <path d="M2536.2,451.9L2544.2 462.7 2548.2 464.6 2548.9 460.2 2536.9 448.9 z"></path> <path d="M2492.4,327.4L2490.9 329.4 2499.2 336.7 2500.2 340.9 2502.4 340.7 2502.7 336.3 2500.2 334 z"></path> <path d="M2496.4,337.7L2494.9 338 2493.9 342.4 2490.7 344.4 2481.4 346 2481.9 349.5 2491.7 349 2497.9 345.2 2497.4 338.4 z"></path> <path d="M2509.9,344.8L2507.4 345.3 2509.7 351.2 2513.4 354.8 2514.4 353.8 2513.9 349.9 z"></path> <path d="M2522.7,358.7L2520.7 354.5 2517.9 353.9 2518.2 357.9 2520.4 360 z"></path> <path d="M2520.9,363.7L2518.9 365.8 2520.9 369.7 2523.4 370.4 2523.4 367.8 z"></path> <path d="M2532.4,366.7L2529.9 362.4 2525.7 361.4 2527.2 365.7 2530.7 369.7 z"></path> <path d="M2539.7,372.2L2534.4 367.8 2535.4 373 2537.7 376.3 z"></path> <path d="M2541.2,384.9L2539.9 379.9 2537.2 379.4 2536.2 380.9 2539.2 384.8 z"></path> <path d="M2527.7,388.4L2530.4 391.9 2532.4 390.7 2530.7 386.9 z"></path> <path d="M2561.2,409.4L2558.9 412.2 2559.9 415.4 2560.9 416.1 2562.9 413.6 z"></path> <path d="M2566.2,420.2L2564.7 417.7 2562.2 418.1 2562.2 420.4 2564.7 421.1 z"></path> <path d="M2564.4,440.2L2565.9 441.9 2568.7 441.1 2565.4 438.6 z"></path> <path d="M2608.2,434.9L2606.2 437.7 2605.9 440.9 2608.2 443.4 z"></path> <path d="M2471.7,354L2475.9 351.9 2472.9 345.2 2466.4 344.9 2464.9 337.7 2448.2 326.4 2445.4 326.2 2432.9 318.2 2422.9 324.9 2419.2 327.2 2413.2 323.4 2412.9 311.3 2409.9 310.9 2402.7 311.8 2398.2 315 2399.9 318.9 2407.7 320.3 2407.7 321.7 2402.9 325.7 2405.2 333.9 2407.7 334 2409.7 325.9 2413.4 325.9 2414.9 333.9 2433.4 349 2433.9 360.9 2440.2 367.8 2444.7 367.7 2444.7 367.7 2445.2 367.5 2445.4 367.5 2445.4 367.5 2450.7 367.4 2458.7 358.2 2465.2 358.4 2469.4 362.3 2470.9 373.9 2484.4 381 2487.9 379.8 2487.9 375.4 2476.9 366.4 z"></path> </g> <g class="oceania eastern-australia" id="eastern-australia"> <title>Eastern Australia</title> <path d="M2396.4,589.9L2396.9 598.4 2405.9 597.9 2416.4 582.1 2399.4 577.7 z"></path> <path d="M2467.7,466.4L2471.2 464.1 2463.9 441.6 2456.2 436.1 2457.4 405.7 2450.2 400.2 2448.4 383.2 2444.9 383.2 2432.7 423.2 2426.2 423.9 2403.9 464.4 2403.9 562.1 2406.7 561.2 2410.4 564.7 2431.4 561.7 2451.4 529.6 2458.4 527.7 2472.9 501.1 2476.7 477.9 z"></path> </g> <g class="oceania western-australia" id="western-australia"> <title>Western Australia</title> <path d="M2339.9,411.6L2340.4 418.9 2335.7 425.6 2323.4 425.6 2297.6 436.4 2288.6 460.7 2287.9 503.7 2281.4 508.7 2280.6 512.9 2289.6 519.1 2311.9 514.7 2323.4 514.7 2327.7 508.7 2338.2 506.7 2338.2 462.4 2345.5 462.4 2345.5 408.2 z"></path> </g> <g class="oceania northern-australia" id="northern-australia"> <title>Northern Australia</title> <path d="M2409.9,406.7L2418.2 384.2 2402.4 381.2 2384.9 386 2380.2 400.1 2372.4 401.9 2371.9 392.2 2347.2 407.1 2347.2 462.4 2402.7 462.4 2424.9 421.9 z"></path> </g> </svg> </div> 

Answer 3

您可以為此使用事件委托 。 這樣的事情應該起作用：

JS

$( "#svg-container" ).on( "click", "g", function( event ) {
    var elementId = $(event.target).attr("id");
    alert(elementId);
});

Answer 4

這里不需要事件委托。 事件處理程序將完成這項工作。 如果您使用的是jQuery ，則應該可以使用它。

$('#svg-container').bind('click', function(event) {
    alert($(event.target).closest("g").attr("id"));
});