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

I'm displaying the archive of my newsletter of MailChimp on my website, which output in HTML as:

我正在我的网站上显示MailChimp简报的存档,其输出格式为:

<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>

I'd like to hide the date, I believe the way would be to hide the content before the div .campaign a. How can I achieve this? Thanks for your help.

我想隐藏日期,我相信方法是在div之前隐藏内容.campaign a。我怎样才能做到这一点?谢谢你的帮助。

3 个解决方案

#1

You can do this to hide the date.

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

<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>

You can use style="visibility: hidden" too.

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

#2

As the date is in a text node you can use content() to retrieve it. If you can guarantee that it will always be the first child within a .campaign element you can then use .first() then remove(), like this:

由于日期位于文本节点中,因此您可以使用content()来检索它。如果你可以保证它永远是.campaign元素中的第一个子元素,你可以使用.first()然后remove(),如下所示:

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

Example fiddle

That will remove the element from the DOM completely. If you just want to hide the element from view you could wrap it in a span and set display: none on that element:

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

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

.campaign span {
    display: none;
}

Example fiddle

#3

One approach, using plain JavaScript, is the following; although this approach does require that the sibling node to hide is the immediate previousSibling:

使用纯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.

JS小提琴演示。