Question

如何使用jquery过滤器函数返回匹配属性的值？我尝试在下面返回一个对象，而不是属性的值。

  var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';  
    if(htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")){
    	var matching = $(htmlBlock).filter(function(){
    		return $(this).attr('data-user-mode-key');
    	});
    	$("input#indexMode").val(matching);
    	console.log("matching", matching);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

基于单个attr

var htmlBlock = '<div class="row"><div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>hello<p>hi</p><div></div><div>';  
        if(htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")){
        	var matching = $(htmlBlock).attr('data-user-mode-key');
        	$("input#indexMode").val(matching);
        	console.log("matching", matching);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

如果您的HTML可以有多个具有该属性的元素，或者该属性位于嵌套元素中，则可以这样进行：

var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';
var $matches = $("<div>").append(htmlBlock).find("[data-user-mode=CURRENT_MODE_USER]");
var values = $.map($matches, function(elem) {
    return $(elem).attr("data-user-mode-key");
});
if (values.length) {
    // Uncomment if you need to put this array as string in an input box
    // $("input#indexMode").val(values);
    console.log("matching", values);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您不需要filter，只需获取attr：

var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';
if (htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")) {
  var matching = $(htmlBlock).attr('data-user-mode-key');
  $("input#indexMode").val(matching);
  console.log("matching", matching);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

要查找多个项目，需要将htmlBlock解析为DOM：

var htmlBlock = `
<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="aaaaaa"></div>
<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="bbbbbb"></div>
<div data-user-mode="NO_CURRENT_MODE" data-user-mode-key="cccccc"></div>
`;

var parser = new DOMParser();
var doc = parser.parseFromString(htmlBlock, 'text/html');

doc.querySelectorAll('[data-user-mode="CURRENT_MODE_USER"]')
  .forEach(e => console.log("matching", e.getAttribute('data-user-mode-key')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在jquery过滤器函数中返回属性的值

2 个答案: