选择带有 space 分隔词的元素

Question

我正在我的视图中动态添加元素，如下所示：

@foreach ($categoryViews as $key => $value)
    <div class="large-2 columns text-center">
        <div id='{{ $key }}' style="height: 101px; width: 102px; margin: 0 auto"></div>
    </div>
@endforeach

但是我的一个键是一个字符串space分开的，它看起来像这样Product test

我知道 id 不能分开，但我正在尝试找到一种方法 select 以某种方式处理这些元素，因为我将从我的数据库中获取它们，而不是通过更改来制作 slugs对他们来说，我想知道如何用 jQuery 实现这一目标，我认为这是可能的，因为 stack overflow. In my script I am trying to initiate charts for each element, by going through an the same array. I am using $('[id=' + key + ']') as a selector for space separated words by following this example 上已经有一个关于它的话题，像这样：

for (var key in icoop.viewsByCategory) {
    $('[id=' + key + ']').highcharts({
        // my code...
    }

在我的控制台中出现错误：

jquery.js:1468Uncaught Error: Syntax error, unrecognized expression: [id=Product test]

Answer 1

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

您不能将 ID 与 space 一起使用，但您可以将数据与 space 一起作为属性存储，并通过 jQuery 找到它。

可能的解决方案：

@foreach ($categoryViews as $key => $value)
    <div class="large-2 columns text-center">
        <div data-name='{{ $key }}' style="height: 101px; width: 102px; margin: 0 auto"></div>
    </div>
@endforeach

JavaScript代码：

for (var key in icoop.viewsByCategory) {

    $('div[data-name=' + key + ']')[0].highcharts({

        // your code code...
    }
}

简历：

<div data-name='some text'></div>

$("div[data-name='some text']")[0];

Answer 2

ID 不能包含空格或其他空白字符（\t、\r、\n...）。他们就是做不到。这样做：

<span id='my id'></span>

将为span分配两个不同的ID。

Answer 3

Identifier不能包含space，不过还是要用，Attribute Equals Selector [name=”value”]可以用。

$('[id="' + key + '"]').highcharts()

选择带有 space 分隔词的元素

Selecting element with a space separeted words

javascript

jquery

jquery-selectors