如何隐藏jquery中特定div之前的内容？

Question

我在我的网站上显示我的 MailChimp 时事通讯存档，它在 HTML 中输出为：

<div class="display_archive">
    <div class="campaign">
        04/29/2016 - <a href="#" target="_blank" title="TITLE HERE">TITLE HERE</a>
    </div>
    <div class="campaign">
        03/24/2016 - <a href="#" target="_blank" title="TITLE HERE">TITLE HERE - March 2016</a>
    </div>
</div>

我想隐藏日期，我认为隐藏div .campaign a之前的内容是可行的。我怎样才能做到这一点？感谢您的帮助。

Answer 1

由于日期在文本节点中，您可以使用 content() 来检索它。如果你能保证它永远是 .campaign 元素中的第一个子元素，你就可以使用 .first() 然后 remove()，像这样：

$('.campaign').each(function() {
    $(this).contents().first().remove();
})

Example fiddle

这将从 DOM 中完全删除该元素。如果您只想从视图中隐藏该元素，您可以将其包装在 span 中并在该元素上设置 display: none：

$('.campaign').each(function() {
    $(this).contents().first().wrap('<span />');
})

.campaign span {
    display: none;
}

Example fiddle

Answer 2

您可以这样做来隐藏日期。

<div class="display_archive">
    <div class="campaign">
        <span style="display: none;">04/29/2016 - </span>
        <a href="#" target="_blank" title="TITLE HERE">TITLE HERE</a>
    </div>
    <div class="campaign">
        <span style="display: none;">03/24/2016 - </span>
        <a href="#" target="_blank" title="TITLE HERE">TITLE HERE - March 2016</a>
    </div>
</div>

您也可以使用 style="visibility: hidden"。

Answer 3

一种使用普通 JavaScript 的方法如下；尽管这种方法确实需要隐藏的兄弟节点是直接 previousSibling:

function hidePrevious(opts) {

  // setting up the defaults:
  var settings = {
      // no default 'start' element (the element(s) before
      // which you wish to hide the previousSibling):
      'start': null,

      // defaulting to wrapping the previousSibling (if
      // it isn't already wrapped in an element):
      'wrap': true,

      // what to wrap with:
      'wrapWith': 'span'
    },
    // empty variables for later use:
    wrapper,
    prev,
    startPoints;

  // iterating through the keys of the opts object, if
  // set; otherwise using an empty Object to avoid
  // errors:
  Object.keys(opts || {}).forEach(function(key) {

    // updating the settings property with the
    // property value of the opts Object:
    settings[key] = opts[key];
  });

  // if settings.start is a String:
  if (typeof settings.start === 'string') {

    // we pass that String to document.querySelectorAll(),
    // then use Array.prototype.slice() to convert the
    // collection into an Array (since Array.from() doesn't
    // work in my at-work computer, sadly):
    startPoints = Array.prototype.slice.call(document.querySelectorAll(settings.start), 0);

  // otherwise, if the settings.length property-value has a
  // length property, or is an instanceof a NodeList:
  } else if (settings.length || settings.start instanceof NodeList) {

    // we directly turn that NodeList or Array into an Array
    // (no damage except wasted time if it's already an Array):
    startPoints = Array.prototype.slice.call(settings.start, 0);
  }

  // iterating over the Array of nodes:
  startPoints.forEach(function(el) {

    // creating an element equal to either that set in the
    // settings.wrapWith property-value, or using the
    // node's own localName (the tagName, but in lower-case):
    wrapper = document.createElement(settings.wrapWith || el.localName);

    // assigning the previousSibling of the current element to
    // the prev variable:
    prev = el.previousSibling;

    // we should wrap the previousSibling (settings.wrap === true),
    // and we have a previousSibling and that previousSibling is a
    // textNode (nodeType === 3):
    if (settings.wrap === true && prev && prev.nodeType === 3) {

      // we insert the wrapper ahead of the previousSibling:
      prev.parentNode.insertBefore(wrapper, prev);

      // move the previousSibling into the wrappper:
      wrapper.appendChild(prev);

      // update the style of the wrapper element to hide it:
      wrapper.style.opacity = 0;
      wrapper.style.backgroundColor = 'transparent';
      wrapper.style.color = 'transparent';

    // otherwise, if we must still wrap, and we still have a
    // previousSibling and that previousSibling is an
    // HTMLElementNode (nodeType === 1):
    } else if (settings.wrap === true && prev && prev.nodeType === 1) {

      // we simply style that previous element:
      prev.style.opacity = 0;
      prev.style.backgroundColor = 'transparent';
      prev.style.color = 'transparent';
    } else {

      // otherwise we assign the trimmed text of the 
      // previousSibling to the current element using
      // a custom data-* property:
      el.dataset.previoustextcontent = prev.nodeValue.trim();

      // and directly remove the previousSibling:
      prev.parentNode.removeChild(prev);
    }

  });

}

hidePrevious({
  'start': document.querySelectorAll('.campaign a'),
  'wrapWith': 'b'
});

function hidePrevious(opts) {
  var settings = {
      'start': null,
      'wrap': true,
      'wrapWith': 'span'
    },
    wrapper,
    prev,
    startPoints;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (typeof settings.start === 'string') {
    startPoints = Array.prototype.slice.call(document.querySelectorAll(settings.start), 0);
  } else if (settings.length || settings.start instanceof NodeList) {
    startPoints = Array.prototype.slice.call(settings.start, 0);
  }

  startPoints.forEach(function(el) {
    wrapper = document.createElement(settings.wrapWith || el.localName);
    prev = el.previousSibling;

    if (settings.wrap === true && prev && prev.nodeType === 3) {
      prev.parentNode.insertBefore(wrapper, prev);
      wrapper.appendChild(prev);
      wrapper.style.opacity = 0;
      wrapper.style.backgroundColor = 'transparent';
      wrapper.style.color = 'transparent';
    } else if (settings.wrap === true && prev && prev.nodeType === 1) {
      prev.style.opacity = 0;
      prev.style.backgroundColor = 'transparent';
      prev.style.color = 'transparent';
    } else {
      el.dataset.previoustextcontent = prev.nodeValue.trim();
      prev.parentNode.removeChild(prev);
    }

  });

}

hidePrevious({
  'start': document.querySelectorAll('.campaign a'),
  'wrapWith': 'b'
});

<div class="display_archive">
  <div class="campaign">
    04/29/2016 - <a href="#" target="_blank" title="TITLE HERE">TITLE HERE</a>
  </div>
  <div class="campaign">
    <em>03/24/2016 -</em><a href="#" target="_blank" title="TITLE HERE">TITLE HERE - March 2016</a>
  </div>

  <div class="campaign">
    <em>02/24/2016 -</em><a href="#" target="_blank" title="TITLE HERE">TITLE HERE - February 2016</a>
  </div>
</div>

JS Fiddle demo.

如何隐藏jquery中特定div之前的内容？

How to hide content before a specific div in jquery?

css

jquery

hide

display