为什么这个 div 不添加 jQuery 类？

Question

我对我的数据库进行 $.get 调用，它返回一些 HTML (data)：

$.get(url, null, function(data) {

它返回的 HTML 是这样的：

<div id="1234" class="myclass">..more html..</div>

在我的回调函数中，我尝试向其中添加一个类（基于我已成功测试的一些条件），如下所示：

if (someCondition) $(data).addClass('mynewclass' + someId);

即使 someCondition 为 true，我的 HTML 也没有 mynewclass[someId] 类添加到其中。有什么理由可以解释为什么我只是愚蠢地忽略了这一点吗？

谢谢... :\

编辑

这是链接到一个可重现的示例。这并不是我本身正在做的事情（我没有使用外部的 var 来获取我的数据，但我正在重现相同的效果）。注意它如何在测试中显示“假”。

Answer 1

问题是您正在创建多个 div 对象。您创建的第一个将被丢弃。然后创建一个新的类，它不具有先前添加的类。

保留对首次创建且应用了该类的 div 的引用。然后将相同的 div 添加到页面。

function(something) {
    var div = $(data).addClass('someClass');
    $('#container').html(div + div.is('.someClass'));
}

然而，现在我们处理的是一个对象（div）而不是一个字符串，并且尝试将对象转换为字符串将产生“[object Object]”。因此，将追加函数修改为：

$('#container').empty();
$('#container').append(div).append(String(div.is('.someClass')));

查看更新的示例。

Answer 2

jQuery 就像原始 javascript 一样在 DOM 上工作。而你正在做的，是尝试操作数据（在你的情况下，HTML 是长字符串）。在开始使用 DOM 之前，您至少需要将您请求的 HTML 数据添加到 DOM 中。你的回调应该是这样的。

function(data){
  $('#container_to_fit_data').html(data); // Adding to Document
  someId = 1234;
  if (someCondition) 
      $('#'+someId, '#container_to_fit_data').addClass('mynewclass' + someId);
      // or lets see it in simplest form
      // $('#container_to_fit_data').find('#'+someId).addClass('mynewclass' + someId);
}

[ EDIT ]

@Anurag jQuery 确实能够操作字符串数据，但非 ID 事务的情况却并非如此。

您可以看到，

DOM_STR1 = "<div>
              <p>
                 <strong>Strong</strong>
                 <span class='myclass'>Span</span>
              </p>
            </div>"

DOM_STR2 = "<p>
              <strong>Strong</strong>
              <span class='myclass'>Span</span>
            </p>"


$('span.myclass', DOM_STR1) // We find span. Allright.
$('span.myclass', DOM_STR2) // We find span. Cool.

$('p', DOM_STR1) // We find p too. But..
$('p', DOM_STR2) // Empty. Never return p, Why??
$('div', DOM_STR1) // Empty Again. Why??

“div”出现在 DOM_STR1 中，与“p”出现在 DOM_STR2 中的方式相同。为什么 jQuery 无法读取包装元素，但可以从字符串中找到子元素？

因此，当数据无论如何都需要存储在 DOM 上时，从字符串中操作它是没有意义的。

Answer 3

@Jason：这就是我的观点，您需要在 jQuery 对象上使用 .addClass，而不是原始 HTML。或者您需要模式匹配“数据”，将其视为字符串（确实如此）并将您的类注入类属性中。

Answer 4

“data”变量指的是返回信息的整个集合。像这样的东西应该有效：

if(someCondition) { $(data).find('#1234').addClass('mynewclass'+someId); }