-2

我不熟悉 jQuery，请告诉我该怎么做，如何工作：

现在： 

jQuery('.class1').contents().unwrap(); // It works well, but I want more quickly

必须： 

text = document.querySelectorAll('section.body')[0];

jQuery(text).something('.class1').contents().unwrap(); // Does not work. Uncaught TypeError: jQuery(...)[0].add is not a function

如何指定条件以更快地工作。它应该只是一个变量，因为所有带有这些变量的代码

而我不需要jQuery('.class1,section.body:first')。我需要类似的东西jQuery('section.body:first .class1')。section.body--->class1带有变量“text”，即 $text->class1

谢谢大家的回复，原来是这样的：

text = document.querySelectorAll('section.body')[0];

jQuery(text).find('.class1').contents().unwrap();
4

1 回答 1

0

如果您想提高速度，请使用纯 JavaScript。在此代码段中，我有一个名为unWrap(). 它由 和 等属性和方法.parentNode querySelectorAll()组成insertBefore()。Snippet 的底部是一个按钮/输入文本，输入您希望展开的元素的有效选择器。详细信息在源中进行了注释。

片段

var uw = document.getElementById('unwrap');

uw.addEventListener('change', function() {
  var sel = document.getElementById('in1').value;
  unWrap(sel);
}, false);




function unWrap(selector) {
  // Reference passed selector of target
  var target = document.querySelector(selector);
  // Reference to the target's parent
  var parent = target.parentNode;
  // Loops through target's children and moves them
  while (target.firstChild) {
    parent.insertBefore(target.firstChild, target);
  }
  // Finally, target is removed
  parent.removeChild(target);
}
header,
footer {
  background: rgba(0, 0, 0, .4);
  height: 40px;
  width: 100vw;
}
hgroup,
address {
  border: 2px solid orange;
  width: 100%;
  line-height: 25px;
}
address {
  float: right;
  text-align: right;
}
main {
  width: 100vw;
  height: 100vh;
  background: #333;
}
article {
  width: 25vw;
  height: 40vh;
  border: 1px solid black;
  background: #0ff;
}
section {
  width: 80vw;
  height: 350px;
  background: rgba(255, 0, 0, .5);
}
p {
  font: 400 14px/1.4 Verdana;
  background: blue;
}
ul {
  list-style: none;
}
li {
  margin: 0 0 12px 18px;
}
b {
  background: yellow;
}
#unwrap {
  width: 45ex;
}
#in1 {
  width: 30ex;
}
<header>
  <hgroup>
    <h1>The Quickest unWrap in the West</h1>
    <h2>Plain Javascript is Faster than jQuery</h2>
    <hgroup>
      <header>
        <main>
          <article>
            <section>
              <p>
                Uh'e r'luh R'lyeh fm'latgh nog ftaghu Cthulhu Chaugnar Faugn nggnaiih vulgtlagln s'uhn, hrii uln Cthulhu lloig bug ilyaa naflshugg k'yarnak nglui, nnnmg orr'e 'fhalma hafh'drn <b>Hastur</b> shagg R'lyeh ph'Tsathoggua kn'a.
              </p>
              <aside>
                <ul>
                  <li>Cthulhu</li>
                  <li>Hastur</li>
                  <li>Tsathoggua</li>
                  <li>Nyogtha</li>
                </ul>
              </aside>
            </section>
          </article>
        </main>
        <footer>
          <address>cthulhu@ryleh.com</address>
        </footer>
        <hr/>
        <label for='unwrap'>Unwrap:
          <button id='unwrap'>
            <input id='in1' placeholder="Enter a tagName, className, id, etc.">
          </button>
        </label>

于 2016-11-28T14:43:19.207 回答