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

但我的一个键是一个空格分隔的字符串，它看起来像Product test

我知道ids一定不能分开，但是我试图找到一种方法来选择那些元素，因为我会从我的数据库中获取它们，所以我不知道是不是要为它们制作slu for的变化，我想知道我将如何通过jQuery实现这一目标，我认为可以这样做，因为在stack overflow上已有一个关于它的话题。在我的脚本中，我试图通过一个相同的数组为每个元素启动图表。我使用$('[id=' + key + ']')作为空格分隔词的选择器，方法是按照example进行操作，如下所示：

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

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

jquery.js：1468未捕获错误：语法错误，无法识别的表达式：[id =产品测试]

Answer 1

标识符不能包含空格，但是您仍需要使用它，可以使用Attribute Equals Selector [name=”value”]。

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

Answer 2

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

您不能将ID与空间一起使用，但您可以使用空格作为属性存储数据，并使用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 3

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

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

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

选择带有空格的元素

3 个答案: