jQuery review DOM和react

ddrv8njm  于 11个月前  发布在  jQuery
关注(0)|答案(3)|浏览(94)

我有一堆DIV,它们是一个投资组合中的提要,该投资组合有一个显示和隐藏DIV的过滤系统-这很好用-我正在调整这个系统来查看与点击的过滤器匹配的DIV,然后用jQuery用一个新的类对它们进行样式化。CSS nth-of-type不起作用,因为它识别隐藏的DIV,从而弄乱了我的自定义布局,所以我需要一种可靠的方法来检查DIV列表,并将新类仅应用于那些没有应用内联样式"transform: scale(0.001)"的DIV-这种内联样式由过滤系统应用,我不想搞砸-所以我正在寻找一种方法,在DIVS中添加一个新的类,而不是在每次单击过滤器按钮时应用"transform: scale(0.001)"
我想添加的类是“itemPOS 1”到第一个没有应用转换的div,然后“itemPOS 2”到第二个,等等......所以下面的DIVS列表在初始加载时看起来像这样:

<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>

字符串
然后点击过滤器后,列表可能看起来像这样:

<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>


在这种情况下,当我将新类添加到合适的DIVS中时,列表将如下所示:

<div class="itemPOS1">Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div class="itemPOS2">Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>


因此,在前端-用户只会看到“项目1”和“项目4”。
我似乎不能得到这个工作很好-我正在使用:

$('div:visible:eq(0)').addClass('itemPOS1');
$('div:visible:eq(1)').addClass('itemPOS2');
$('div:visible:eq(2)').addClass('itemPOS3');
$('div:visible:eq(3)').addClass('itemPOS4');


但它并不可靠,因为有时它会将类应用于应用了transform:scale(0.001)的div,从而使项目的渲染错误,因为类名被错误地添加。我希望找到一种方法,只将添加类逻辑应用于那些没有应用“transform:scale(0.001)”的div。
我还想将itemPOS 1、2、3、4和5添加到没有应用内联转换的每5个DIV中-例如,应该应用类的第6个DIV应该得到itemPOS 1而不是itemPOS 6
有什么想法吗?
在本质上寻找:
如果div没有transform:scale(0.001),则添加类itemPOSX
X从第一格的1开始,然后是第二格的2.直到第五格,然后第六格有itemPOS 1,第七格有itemPO 2,等等。

$('div:visible:eq(0)').addClass('itemPOS1');
$('div:visible:eq(1)').addClass('itemPOS2');
$('div:visible:eq(2)').addClass('itemPOS3');
$('div:visible:eq(3)').addClass('itemPOS4');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>basic set</h2>
<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>
<h2>test set filtered:</h2>
<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
njthzxwz

njthzxwz1#

在你的示例中,:visible不会工作,因为技术上它仍然没有隐藏,只是 * 真的 * 小。使用not()代替。

更新从你的评论,我假设你想重置计数后5。为此,我们可以使用modulo (or remainder) operator得到一个除法的余数。

let maxPos = 5;

//Select all divs that don't contain your transform style and iterate
//The selector would also work with querySelectorAll natively
$("div:not([style*='transform: scale(0.001)'])").each(function(idx){
  //If maxPos > 0 use the modulo operator to get our position index
  //otherwise don't reset
  let classIdx =  maxPos > 0 ? idx % maxPos + 1 : idx;
  //Add the class dynamically based off the index
  $(this).addClass("POS"+classIdx)
  //Or if you want to one line it:
  //$(this).addClass("POS"+(maxPos > 0 ? idx % maxPos + 1 : idx));
});
/*Just to display the added class name*/
[class^=POS]::after {
  content: 'Class: ' attr(class);
  font-size:0.75em;
  display:inline-block;
  padding-left: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
<div>Project 6</div>
<div>Project 7</div>
<div>Project 8</div>
<div>Project 9</div>
<div>Project 10</div>

有关更多信息,请参阅Attribute Selectorsnot() pseudo class

pkmbmrz7

pkmbmrz72#

首先:这些并不是“隐藏”的。可见与隐藏引用:Difference between :hidden and :not(:visible) in jQuery
此分类上一篇:

我做了什么(大致)

在这里我做了一些操作你的类和多一点,显示如何选择只是那些(这是你的问题)。注意:如果你点击第二个按钮第二次它得到新的第一个.

$(function() {
  $("#make-obvious-stuff").on('click', function() {
    // select by those with the style transform
    let these = $("[style='transform: scale(0.001)']");
    // now do some stuff with them
    // show how many:
    $(this).after("<div class='found'>Found:" + these.length + "</div>");
    // give class to first one
    these.first().addClass("make-obvious");
    // wrap those NOT the first one; see them do nothing
    these.not().first().wrap("<div class='wrapped'></div>");
    // does nothing:
    these.not().first().show(); // does nothing
    // remove the transform on first one: NOW we see it.
    these.first().css("transform", "");

  });

  $("#do-stuff").on('click', function() {
    // do what was asked: (but this does little perhaps?
    let these = $("[style='transform: scale(0.001)']");
    these.eq(0).addClass('itemPOS1');
    these.eq(1).addClass('itemPOS2');// this overrides the style with !important (that is a bad pattern to adopt)
    these.eq(2).addClass('itemPOS3');
    these.eq(4).addClass('itemPOS4');
  });
})
.make-obvious {
  border: solid lime 1px;
  background-color: #ffdddd;
  padding: 1rem;
}

.wrapped: {
  border: solid blue 2px;
  padding: 2rem;
  background-color: #ddffdd;
}

.found {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid black;
}

.itemPOS1 {
  background-color: #ddddff;
}
.itemPOS2 {
  background-color: #ffddff;
  transform: scale(1)!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>basic set</h2>
<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>
<h2>test set filtered:</h2>
<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
Click me first:
<button id="do-stuff">Do Stuff</button> Click me Second:
<button id="make-obvious-stuff">Make Obvious</button>
eqzww0vc

eqzww0vc3#

你可以这样做(检查控制台):
说明:
1.我们设置一个从1开始的计数器变量
1.我们每隔div
1.我们检查div是否不具有指定的样式,当发现时,我们使用计数器值应用所需的类,并将计数器递增1。
1.当计数器达到我们的上限(5)时,我们将其设置回1。

const allDivs = document.querySelectorAll("div")
let counter=1;
allDivs.forEach(div=>{
  if (div.style.transform !== "scale(0.001)" ) {
  if(counter<6){
  $(div).addClass('itemPOS' + counter);
  counter++
  }else{
  counter=1;
  $(div).addClass('itemPOS' + counter);
  counter++
  }

  }
  console.log( "class is : " + div.classList[0] + " and style(transform) is : " + div.style.transform )

})

个字符

相关问题