无法从 jQuery 对象中轻松访问和重新呈现元素

Question

我正在尝试使用来自所述部分的更新元素来呈现我的页面的部分和重新呈现元素。 我现在使用 erb 的 js 看起来像这样（我不满意）：

var showPage = '<%= j render partial: "orders/show-price", locals: {variant: @variant, line_item: @line_item} %>'
$('[data-unit-price]').html($(showPage)[0])
$('[data-total-price]').html($(showPage)[2])

showPage返回一个 HTML 字符串：

<p data-unit-price="">Unit Price: 11.86</p>
<p data-total-price="">Total: 118.60</p>

而$(showPage)返回T.fn.init(3) [p, text, p]

通常，我只会做类似的事情：

$('[data-unit-price]').html($('[data-unit-price]', showPage))

实际上在我的代码中的其他地方也存在类似的情况：

var sidebar = '<%= j render partial: "layouts/sidebar" %>'
if($('[data-cart-link]').length){
  $('[data-cart-link]').html($('[data-cart-link]', sidebar))
} else {
  $('[data-cart-link-prepend-target]').prepend($('[data-cart-link]', sidebar))
}

其中侧边栏还返回一个 html 字符串。 上面的示例按需要工作，因为它从呈现的部分获取更新的信息并在 DOM 中重新呈现该元素。

我在这里做错了什么？ 这两种情况有什么不同？ 我希望能够通过属性而不是数组索引找到我的元素，但我没有任何运气。

非常感谢。

Answer 1

问题是因为当您为选择器提供要在其中进行搜索的上下文时，就像您在这一行中一样： $('[data-cart-link]', sidebar) ，它find()内部使用find() 。 这不适用于您存储在showPage的 HTML，因为其中没有find()父元素，因此不会返回任何内容。

这个问题的解决方案是使用filter()来搜索当前集合中的所有元素：

 var showPage = `<p data-unit-price="">Unit Price: 11.86</p> <p data-total-price="">Total: 118.60</p>`; var $showPage = $(showPage); $('[data-unit-price]').append($showPage.filter('[data-unit-price]')); $('[data-total-price]').append($showPage.filter('[data-total-price]'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-unit-price></div> <div data-total-price></div>

还要注意这里append()的使用，因为您向该方法提供了一个 jQuery 对象，而不是一个字符串。