javascript - 无法从 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))
}

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

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

非常感谢。

Answer 1

问题是因为当您为选择器提供要在其中搜索的上下文时，就像您在这一行中一样:$('[data-cart-link]', sidebar)，它使用 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 对象，而不是一个字符串。