Question

我想找到包含自定义属性 mod 的div元素，而不是将div附加到列表项。但首先我必须删除包含重复mod值的 divs 。这就是我所做的事情

ffmpeg -f gdigrab -i title="firefox - How to use FFMPEG to capture a browser's tab content - Stack Overflow - Mozilla Firefox" -pix_fmt yuv420p tabgrab.mp4

这是我的剧本

<div class="list"></div>

<div class="container">
    <div mod="dog"></div>
    <div mod="man"></div>
    <div mod="woman"></div>
    <div mod="dog"></div>
    <div mod="bird"></div>
    <div mod="insects"></div>
    <div mod="dog"></div>
</div>

你可以看到我已经习惯了很多循环，有没有简单的方法可以做到这一点。谢谢！

Answer 1

尝试此操作，只有在mod中尚未包含list的元素时才会添加：

$('.list').append('<ul>');
$('.container [mod]').each(function(index, el) {
  if($('.list [mod=' + $(el).attr('mod') + ']').length === 0) {
    $('.list ul').append($('<li>' + el.outerHTML + '</li>'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="list"></div>

<div class="container">
    <div mod="dog">Dog1</div>
    <div mod="man">Man1</div>
    <div mod="woman">Woman1</div>
    <div mod="dog">Dog2</div>
    <div mod="bird">Bird1</div>
    <div mod="insects">Insect1</div>
    <div mod="dog">Dog3</div>
</div>

Answer 2

我们可以使用一个对象作为地图来检查重复项，请参阅注释（我已将文本添加到mod div中，以便我们可以看到它们）：

＆＃13;

modArr($('.container').find('[mod]'));

function modArr(elements) {
  // A place to remember the mods we've seen
  var knownMods = Object.create(null);
  // Create the list
  var ul = $("<ul></ul>");
  // Loop the divs
  elements.each(function() {
    // Get this mod value
    var mod = this.getAttribute("mod");
    // Already have one?
    if (!knownMods[mod]) {
      // No, add it
      knownMods[mod] = true;
      ul.append($("<li></li>").append(this.cloneNode(true)));
    }
  });
  // Put the list in the .list element
  ul.appendTo(".list");
}

＆＃13;

<div class="list"></div>

<div class="container">
    <div mod="dog">dog</div>
    <div mod="man">man</div>
    <div mod="woman">woman</div>
    <div mod="dog">dog</div>
    <div mod="bird">bird</div>
    <div mod="insects">insects</div>
    <div mod="dog">dog</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

我们也可以使用DOM来检查重复项，但它有点慢（不是这里的元素数量很重要）：

＆＃13;

modArr($('.container').find('[mod]'));

function modArr(elements) {
  // Create the list
  var ul = $("<ul></ul>");
  // Loop the divs
  elements.each(function() {
    // Get this mod value
    var mod = this.getAttribute("mod");
    // Already have one?
    if (ul.find('div[mod="' + mod + '"]').length == 0) {
      // No, add it
      ul.append($("<li></li>").append(this.cloneNode(true)));
    }
  });
  // Put the list in the .list element
  ul.appendTo(".list");
}

＆＃13;

<div class="list"></div>

<div class="container">
    <div mod="dog">dog</div>
    <div mod="man">man</div>
    <div mod="woman">woman</div>
    <div mod="dog">dog</div>
    <div mod="bird">bird</div>
    <div mod="insects">insects</div>
    <div mod="dog">dog</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

注意：我使用了this.cloneNode(true)而不是outerHTML，因为没有必要通过标记进行往返。如果你想要更多的jQuery，那就是$(this).clone(); ;-)同样，如果你不喜欢this.getAttribute("mod")，那么$(this).attr("mod")。

如果我没有指出mod是div元素的无效属性名称，我会失职。不过，您可以使用以data-开头的任何名称，因此也许使用<div data-mod="dog">。

简化删除重复数组的功能

2 个答案: