javascript - 查找选中标签的标题

有一个棘手的问题，想知道是否有人提出建议。

因此，我编写了一个脚本，该脚本查找在其父级上具有选定类的所有标签，它将对其进行克隆并将其附加到活动列表中，以便创建“过滤的项目”列表。

我想要做的是找到标签所属的每个部分的标题，并将其附加到每个标签上，因此，如果从“尺寸”部分中选择了该标签，我希望活动标签显示为“ Size：S”，然后如果它来自“颜色”部分，则显示为“颜色：蓝色”。目前，我仅设法获得它，因此它吐出了所有标题，但无法将其范围缩小到正确的过滤器部分。

var filterItem = '.m-refinement-item',
  filterItemClick = filterItem + ' .js-button-apply';

function swipeyFilterBtns() {
  $(".content-stuff").before("<section class='swipeySizeFilter'></section>");

  var index = 1;
  var text_val = $('.m-refinement-item').find('.js-refinement-name').text();

  console.log(text_val);

  $(filterItem)
    .find('.selected label')
    .clone()
    .wrapInner('<span class="swipeyLabelText">' + text_val + ': </span>')
    .appendTo($('.swipeySizeFilter'));

  $('.swipeySizeFilter label').each(function() {
    $(this)
      .addClass('swipeyFilterLabel')
      .attr('data-position', index);
    index++;
  });
}

function swipeyFilterClicky() {
  $(".swipeyFilterLabel").click(
    function() {
      setTimeout(function() {
        $(".js-overlay.js-mobile-overlay.m-refine-by-button").click();
        $(filterItemClick).click();
        $(".js-apply-refinements").click();
      }, 400);
    });
}

function swipeyFilterActiveItems() {
  $('.input-checkbox').on('change', function() {
    $(this).add('label[for="' + this.id + '"]').toggleClass('NickTester').toggleClass('swipeyFilterBtnActive', this.checked);
  }).trigger('change');
}

function swipeyFilterSetup() {
  var swipeyFilterCheck = $('.swipeyWrapper');

  if (swipeyFilterCheck.length === 0) {
    $('.swipeyFilterLabel').wrapAll('<div class="swipeyWrapper"><div class="swipeyContainer"></div></div>');
    $('<span class="swipeyFilterActiveList"></span>').prependTo('.swipeyContainer');
    $('<div class="swipeyFilterOverlay"></div>').prependTo('.swipeySizeFilter');
  }

  $(function() {
    var swipeyScrollChecker = $('.swipeyWrapper');

    swipeyScrollChecker.scroll(function() {
      if (swipeyScrollChecker.scrollLeft() >
        (swipeyScrollChecker.width() -
          swipeyScrollChecker.width())) {
        $('.swipeyFilterOverlay').fadeOut(300);
      }
    });
  });

  if ($(".swipeyWrapper").prop('scrollWidth') === $(".swipeyWrapper").width()) {
    $('.swipeyFilterOverlay').hide();
  }
}

function swipeyFilterActiveItemsList() {
  $('.swipeyFilterLabel.swipeyFilterBtnActive').each(function() {
    $(this).prependTo($('.swipeyFilterActiveList'));
  });
  $(".swipeyFilterLabel.swipeyFilterBtnActive").sort(sort_li).appendTo('.swipeyFilterActiveList');

  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
  }

  if ($('.swipeyFilterActiveList').length) {
    $('<div class="swipeyFilterTitle">TESTER REFINED STYLES <span class="swipeyFilterCounter"></span>:</div>').prependTo('.swipeySizeFilter');
  }

  function swipeyFilterActiveCount() {
    var swipeyActiveCountNumber = $('.swipeyFilterActiveList .swipeyFilterBtnActive').length;
    $(".swipeyFilterCounter").html('(' + swipeyActiveCountNumber + ')');
  }
  setTimeout(swipeyFilterActiveCount, 100);
}

$(document).ready(function() {
  if ($('.selected').length >= 1) {
    swipeyFilterBtns();
    swipeyFilterClicky();
    swipeyFilterActiveItems();
    swipeyFilterSetup();
    swipeyFilterActiveItemsList();
  }
});

@media only screen and (min-width: 767px) {
  /* #Apple Device Scroll Fix
  –––––––––––––––––––––––––––––––––––––––––––– */
  * {
    -webkit-overflow-scrolling: touch;
  }
  .swipeySizeFilter {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    position: relative;
  }
  .swipeyWrapper {
    cursor: pointer;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .swipeyContainer {
    font-size: 0;
    padding-left: 8px;
  }
  .swipeyFilterTitle {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    margin-left: 20px;
  }
  .swipeyFilterLabel {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 14px;
    margin-left: 12px;
    max-height: 38px;
    min-width: 38px;
    padding: 12px 8px;
    text-align: center;
    vertical-align: top;
  }
  .swipeyFilterBtnActive {
    background: #000;
    color: #fff;
  }
  .m-label-inline .swipeyFilterBtnActive {
    background: #fff;
    color: #000;
  }
  .swipeyFilterBtnActive .swipeyLabelText:after {
    background: url('https://sb.monetate.net/img/1/422/2401995.png') no-repeat center;
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    margin-left: 12px;
    margin-right: 4px;
    position: relative;
    width: 10px;
  }
  .swipeyContainer>.swipeyFilterLabel:last-child {
    margin-right: 20px;
  }
  .swipeyFilterActiveList {
    display: inline-block;
    position: relative;
  }
  .swipeyFilterActiveList:after {
    background: #000;
    content: '';
    height: 38px;
    position: absolute;
    right: 0;
    width: 1px;
  }
  .swipeyWrapper::-webkit-scrollbar,
  .swipeyFilterActiveList:empty {
    display: none;
  }
  .swipeyFilterActiveList>.swipeyFilterLabel:last-child {
    margin-right: 14px;
  }
  .swipeyFilterOverlay {
    background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.5) 10%, rgba(240, 240, 240, 0.85) 45%, rgba(240, 240, 240, 0.9) 85%);
    height: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 1px;
    width: 20px;
    z-index: 2;
  }
}


/* #Default Style Overrides
  –––––––––––––––––––––––––––––––––––––––––––– */

.pagination {
  margin-bottom: 0 !important;
}

.search-result-content {
  margin-top: 20px;
}


/* #iOS Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports (-webkit-overflow-scrolling: touch) {
  body {
    cursor: pointer;
  }
}


/* #Android Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports not (-webkit-overflow-scrolling: touch) {
  .swipeyLabelText {
    position: relative;
    top: -1px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-stuff"></div>
<div class="js-refinement-mobile-table m-refinement-wrapper m-overlay">
  <div class="m-refinement-header">
    Refine by
  </div>
  <div class="js-mobile-overlay-refinements m-refinement-inner m-overlay">
    <ul class="m-refinement-list">
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Size</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" checked="checked" data-value="XS" title="Refine by Size: XS">
              <label for="XS">XS</label>
            </li>
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-name="size" data-value="S" checked="checked" title="Refine by Size: S">
              <label for="S">S</label>
            </li>
          </div>
        </ul>
      </li>
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Colour</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected swatch-beige m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Beige" name="Beige" checked="checked" data-value="Beige" title="Currently Refined by Colour: Beige">
              <label for="Beige">Beige</label>
            </li>
            <li class=" m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Black" name="Black" data-name="color" data-value="Black" title="Refine by Colour: Black">
              <label for="Black">Black</label>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>

抱歉，如果我没有以最好的方式对此进行解释，但在我的Codepen上可能更有意义：https://codepen.io/nickelse/pen/dyyEqzR

最佳答案

var filterItem = '.m-refinement-item',
  filterItemClick = filterItem + ' .js-button-apply';

function swipeyFilterBtns() {
  $(".content-stuff").before("<section class='swipeySizeFilter'></section>");

  var index = 1;
  var text_val = $('.m-refinement-item').find('.js-refinement-name').text();

  console.log(text_val);

  $(filterItem)
    .find('.selected label')
    .clone()
    .wrapInner('<span class="swipeyLabelText">' + text_val + ': </span>')
    .appendTo($('.swipeySizeFilter'));

  $('.swipeySizeFilter label').each(function() {
    $(this)
      .addClass('swipeyFilterLabel')
      .attr('data-position', index);
    index++;
  });
}

function swipeyFilterClicky() {
  $(".swipeyFilterLabel").click(
    function() {
      setTimeout(function() {
        $(".js-overlay.js-mobile-overlay.m-refine-by-button").click();
        $(filterItemClick).click();
        $(".js-apply-refinements").click();
      }, 400);
    });
}

function swipeyFilterActiveItems() {
  $('.input-checkbox').on('change', function() {
    $(this).add('label[for="' + this.id + '"]').toggleClass('NickTester').toggleClass('swipeyFilterBtnActive', this.checked);
  }).trigger('change');
}

function swipeyFilterSetup() {
  var swipeyFilterCheck = $('.swipeyWrapper');

  if (swipeyFilterCheck.length === 0) {
    $('.swipeyFilterLabel').wrapAll('<div class="swipeyWrapper"><div class="swipeyContainer"></div></div>');
    $('<span class="swipeyFilterActiveList"></span>').prependTo('.swipeyContainer');
    $('<div class="swipeyFilterOverlay"></div>').prependTo('.swipeySizeFilter');
  }

  $(function() {
    var swipeyScrollChecker = $('.swipeyWrapper');

    swipeyScrollChecker.scroll(function() {
      if (swipeyScrollChecker.scrollLeft() >
        (swipeyScrollChecker.width() -
          swipeyScrollChecker.width())) {
        $('.swipeyFilterOverlay').fadeOut(300);
      }
    });
  });

  if ($(".swipeyWrapper").prop('scrollWidth') === $(".swipeyWrapper").width()) {
    $('.swipeyFilterOverlay').hide();
  }
}

function swipeyFilterActiveItemsList() {
  $('.swipeyFilterLabel.swipeyFilterBtnActive').each(function() {
    $(this).prependTo($('.swipeyFilterActiveList'));
  });
  $(".swipeyFilterLabel.swipeyFilterBtnActive").sort(sort_li).appendTo('.swipeyFilterActiveList');

  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
  }

  if ($('.swipeyFilterActiveList').length) {
    $('<div class="swipeyFilterTitle">TESTER REFINED STYLES <span class="swipeyFilterCounter"></span>:</div>').prependTo('.swipeySizeFilter');
  }

  function swipeyFilterActiveCount() {
    var swipeyActiveCountNumber = $('.swipeyFilterActiveList .swipeyFilterBtnActive').length;
    $(".swipeyFilterCounter").html('(' + swipeyActiveCountNumber + ')');
  }
  setTimeout(swipeyFilterActiveCount, 100);
}

$(document).ready(function() {
  if ($('.selected').length >= 1) {
    swipeyFilterBtns();
    swipeyFilterClicky();
    swipeyFilterActiveItems();
    swipeyFilterSetup();
    swipeyFilterActiveItemsList();
  }
});

@media only screen and (min-width: 767px) {
  /* #Apple Device Scroll Fix
  –––––––––––––––––––––––––––––––––––––––––––– */
  * {
    -webkit-overflow-scrolling: touch;
  }
  .swipeySizeFilter {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    position: relative;
  }
  .swipeyWrapper {
    cursor: pointer;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .swipeyContainer {
    font-size: 0;
    padding-left: 8px;
  }
  .swipeyFilterTitle {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    margin-left: 20px;
  }
  .swipeyFilterLabel {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 14px;
    margin-left: 12px;
    max-height: 38px;
    min-width: 38px;
    padding: 12px 8px;
    text-align: center;
    vertical-align: top;
  }
  .swipeyFilterBtnActive {
    background: #000;
    color: #fff;
  }
  .m-label-inline .swipeyFilterBtnActive {
    background: #fff;
    color: #000;
  }
  .swipeyFilterBtnActive .swipeyLabelText:after {
    background: url('https://sb.monetate.net/img/1/422/2401995.png') no-repeat center;
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    margin-left: 12px;
    margin-right: 4px;
    position: relative;
    width: 10px;
  }
  .swipeyContainer>.swipeyFilterLabel:last-child {
    margin-right: 20px;
  }
  .swipeyFilterActiveList {
    display: inline-block;
    position: relative;
  }
  .swipeyFilterActiveList:after {
    background: #000;
    content: '';
    height: 38px;
    position: absolute;
    right: 0;
    width: 1px;
  }
  .swipeyWrapper::-webkit-scrollbar,
  .swipeyFilterActiveList:empty {
    display: none;
  }
  .swipeyFilterActiveList>.swipeyFilterLabel:last-child {
    margin-right: 14px;
  }
  .swipeyFilterOverlay {
    background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.5) 10%, rgba(240, 240, 240, 0.85) 45%, rgba(240, 240, 240, 0.9) 85%);
    height: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 1px;
    width: 20px;
    z-index: 2;
  }
}


/* #Default Style Overrides
  –––––––––––––––––––––––––––––––––––––––––––– */

.pagination {
  margin-bottom: 0 !important;
}

.search-result-content {
  margin-top: 20px;
}


/* #iOS Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports (-webkit-overflow-scrolling: touch) {
  body {
    cursor: pointer;
  }
}


/* #Android Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports not (-webkit-overflow-scrolling: touch) {
  .swipeyLabelText {
    position: relative;
    top: -1px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-stuff"></div>
<div class="js-refinement-mobile-table m-refinement-wrapper m-overlay">
  <div class="m-refinement-header">
    Refine by
  </div>
  <div class="js-mobile-overlay-refinements m-refinement-inner m-overlay">
    <ul class="m-refinement-list">
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Size</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" checked="checked" data-value="XS" title="Refine by Size: XS">
              <label for="XS">XS</label>
            </li>
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-name="size" data-value="S" checked="checked" title="Refine by Size: S">
              <label for="S">S</label>
            </li>
          </div>
        </ul>
      </li>
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Colour</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected swatch-beige m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Beige" name="Beige" checked="checked" data-value="Beige" title="Currently Refined by Colour: Beige">
              <label for="Beige">Beige</label>
            </li>
            <li class=" m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Black" name="Black" data-name="color" data-value="Black" title="Refine by Colour: Black">
              <label for="Black">Black</label>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>