选择特定的更深的div类同位素过滤器

简介:我叫亚历克斯。我前不久是一名WordPress开发人员,但六个月后才意识到自己不是真正的编码员。我是一位具有艺术学校背景的设计师,现在正在使用Webflow创建网站。

我正在开发一个个人项目,并且正在尝试使Isotope与Webflow一起使用。同位素已经建立并且几乎可以正常工作。我无法正常工作的是让同位素查看正确的div / class。我必须比现在正在研究的div更深入。如果我将一个类(网络,图形或视频)添加到.grid项,则它可以工作,那不是我所需要的。这些类会自动添加到另一个div内,这就是同位素应查找的位置。请看一下我的HTML,这比您希望我理解的要好:)

这是我的HTML:

<!DOCTYPE html>
<html data-wf-page="5ecc1738ef9a4b9ef96ce0d9" data-wf-site="5ecbb6f2fe4999288fed2b6e">
<head>
  <meta charset="utf-8">
  <title>Filter Test Isotope V2</title>
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/filter-test-isotope-0bd68152173cc6a5df2.webflow.css" rel="stylesheet" type="text/css">
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.classname+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.classname+=t+"touch")}(window,document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
  <div class="section portfolio">
    <div class="container">
      <ul role="list" class="filter">
        <li class="category"><a data-filter="*" href="#">All</a></li>
        <li class="category"><a data-filter=".web" href="#">Web design</a></li>
        <li class="category"><a data-filter=".graphic" href="#">Graphic design</a></li>
        <li class="category"><a data-filter=".video" href="#">Video</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="collection-list-wrapper w-dyn-list">
        <div class="item grid w-dyn-items">
          <div class="grid-item w-dyn-item">
            <div class="w-embed"><input type="hidden" class="web"></div>
            <h1>Title</h1>
          </div>
        </div>
        <div class="w-dyn-empty">
          <div>No items found.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5ecbb6f2fe4999288fed2b6e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

</body>
</html>

这是我的脚本(我已将其放置在页脚中,但为清楚起见,我暂时将其删除:

<script>
var elem = document.querySelector('.grid');
var iso = new Isotope( elem,{
  // options
  itemSelector: '.grid-item',layoutMode: 'fitRows'
});
// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.grid',{
  // options
});
// init Isotope
var $grid = $('.grid').isotope({
  // options
});
// filter items on button click
$('.filter').on( 'click','a',function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
</script>

所以,我需要的是同位素研究该div中的类

<div class="w-embed"><input type="hidden" class="web"></div>

此类是动态占用的,可以是Web,视频或图形。

是否有可能定位此div?希望您能理解我的意思以及我的解决方案!

非常感谢您!

亲切的问候,

zwartekoffie

iCMS 回答:选择特定的更深的div类同位素过滤器

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2272960.html

大家都在问