将属性添加到已过滤的div
将属性添加到已过滤的div
提问于 2019-08-19 22:02:43
jQuery(document).ready(filter);
function filter() {
jQuery(".my-divs").each(function () {
jQuery(".my-divs div").filter(function () {
jQuery(this).toggle(jQuery(this).text() <= 3);
});
});
jQuery(".my-divs div").each(function () {
if (jQuery(this).is(':visible')) {
jQuery(this).attr('data-filtred', 'true');
}
});
}.my-divs div {
display:block;
padding:10px;
border:1px solid #eaeaea;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<hr></hr>
<div id="2" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
我有一些函数通过切换来过滤tr div，所以我需要添加属性到切换后的div (可见的div)。
过滤器工作得很好，我只想将属性data-filtred="true"添加到可见的元素中
function filter()
jQuery(".my-divs").each(function () {
jQuery(".my-divs tr").filter(function () {
jQuery(this).toggle((new Date(jQuery(this).find('td.date').data('basedate')).getTime() >= (from) && new Date(jQuery(this).find('td.date').data('basedate')).getTime() <= (to)));
});
});
}我试过了，但不起作用
function filter()
jQuery(".my-divs").each(function () {
jQuery(".my-divs tr").filter(function () {
jQuery(this).toggle((new Date(jQuery(this).find('td.date').data('basedate')).getTime() >= (from) && new Date(jQuery(this).find('td.date').data('basedate')).getTime() <= (to)));
});
});
jQuery(".my-divs tr").each(function () {
if (jQuery(this).is(':visible')) {
jQuery(this).attr('data-filtred', 'true');
}
}
}回答 3
Stack Overflow用户
发布于 2019-08-20 04:21:38
您使用的过滤器是错误的。使用filter的正确方法是返回一个布尔值，这样它就可以改变jQuery集合。
$(".my-divs div").filter( function () {
return Number($(this).text()) < 3
}).hide()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<hr>
<div id="2" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
但是我不认为过滤器是最好的选择，因为你需要在两个集合上都做动作。所以使用each循环就可以了。
$(".my-divs div").each( function () {
var div = $(this)
if (Number(div.text()) < 3) {
div
.removeAttr("data-filtred")
.removeData("filtered")
.hide()
} else {
div
.setAttr("data-filtred", "true")
.data("filtered", "true")
.show()
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<hr>
<div id="2" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Stack Overflow用户
发布于 2019-08-19 22:18:31
function filter()
jQuery(".my-divs").each(function () {
jQuery(".my-divs tr").filter(function () {
jQuery(this).toggle((new Date(jQuery(this).find('td.date').data('basedate')).getTime() >= (from) && new Date(jQuery(this).find('td.date').data('basedate')).getTime() <= (to)));
});
});
jQuery(".my-divs tr").each(function () {
if (jQuery(this).is(':visible')) {
**jQuery(".my-divs tr").removeAttr('data-filtred');**
jQuery(this).attr('data-filtred', 'true');
}
}
}
Stack Overflow用户
发布于 2019-08-20 03:36:43
我不知道您希望如何使用data-*属性，但我知道如何处理某些情况。
首先，如果您需要添加/更改某些数据-*属性，可以使用.data()函数-如果需要删除，可以使用.removeData()。
我稍微修改了你的代码，只是为了删除一些不必要的代码。它根据您的过滤条件将data-filtered设置为true或false。
jQuery(document).ready(filter);
function filter() {
jQuery(".my-divs div").each(function () {
let el = jQuery(this);
let filter = el.text() <= 3;
el.data('filtered', filter);
el.toggle(filter);
});
}.my-divs div {
display:block;
padding:10px;
border:1px solid #eaeaea;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<hr></hr>
<div id="2" class="my-divs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57558356
复制相关文章
相似问题
腾讯云开发者
