Question

如何将以下内容压缩为一行，以便在评估Javascript时可以在快速代码中使用它？

let options = Array.prototype.slice.call(document.querySelectorAll("#size-options > option"));

let large = options.filter(function(item){
  return item.textContent === "Large";
});

$("#size-options").val(large[0].value).change();

这是我需要将一行代码放入其中的地方：

self.TESTWKWebView.evaluateJavaScript("", completionHandler: nil)

Answer 1

您可以使用jQuery的:contains()和:eq()选择器来制作一个单线纸：

$('#size-options').val($('#size-options option:contains(Large):eq(0)').val()).change()

但是甚至不需要:eq()，因为.val()默认情况下会为您提供集合中第一个元素的值，因此：

$('#size-options').val($('#size-options option:contains(Large)').val()).change()

<select id="size-options">
  <option value="s1">Small 1</option>
  <option value="s2">Small 2</option>
  <option value="l1">Large 1</option>
  <option value="l2">Large 2</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

所以我相信您的评价可能会变成：

self.TESTWKWebView.evaluateJavaScript("$('#size-options').val($('#size-options option:contains(Large):eq(0)').val()).change()", completionHandler: nil)

如果它可以消化jQuery代码OFC，否则

评估纯JS

[...document.querySelectorAll('#size-options option')].some(el => {
  if (/Large/.test(el.textContent)) {
    el.parentNode.value = el.value;
    el.parentNode.dispatchEvent(new Event('change'));
    return true;
  }
});

<select id="size-options">
  <option value="s1">Small 1</option>
  <option value="s2">Small 2</option>
  <option value="l1">Large 1</option>
  <option value="l2">Large 2</option>
</select>

或者您的情况：

self.TESTWKWebView.evaluateJavaScript("[...document.querySelectorAll('#size-options option')].some(el => {if (/Large/.test(el.textContent)) {el.parentNode.value = el.value;el.parentNode.dispatchEvent(new Event('change'));return true;}});", completionHandler: nil)

如何浓缩这个jQuery？

1 个答案:

评估纯JS