删除if元素是否具有特定数据值jquery

时间:2018-05-29 21:55:19

标签: jquery

预期

点击button时,我希望它提醒数据类型值

HTML

<ul id="threads">
 <li data-href='q' data-type='m'>abc <button>Click</button></li>
 <li data-href='q' data-type='t'>mnp <button>Click</button></li>
 <li data-href='r' data-type='t'>rst <button>Click</button></li>
 </ul>

JQUERY

   $(document).on("click","button",function(){


  var  element = $(document).find("div").find("[data-href='q']");

   if(element....has data-type='m'?){alert("this is m type"); }
  if(element....has data-type='t'?){alert("this is t type"); }



    })

这比我预期的时间更长,有谁知道要走的路?

3 个答案:

答案 0 :(得分:1)

$('#threads').find('li').filter("[data-href='q'][data-type='m']").remove();

通过id查找父项,找到嵌套的lis,然后过滤那些同时具有q和m的项,并删除它们。

至于为什么我将选择器分为三个步骤,您可以参考http://learn.jquery.com/performance/optimize-selectors/以获得更多阅读。

以下是使用条件的备用版本。

var $threadItems = $('#threads').find('li');

$threadItems.each(function(index, item){
    var $item = $(item);

    if ($item.data('href') === 'q') {
        if ($item.data('type') === 'm') {
            $item.remove();
        }
    }
});

答案 1 :(得分:1)

$("#threads li[data-href='q'][data-type='m']").remove();

答案 2 :(得分:1)

$(document).ready(function(){
	$("#threads button").click(function(){
		var datatype = $(this).parent().attr("data-type");
		if(datatype == 'm'){
			alert(datatype);
		}else{
			alert(datatype);
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ul id="threads">
 <li data-href='q' data-type='m'>abc <button>Click</button></li>
 <li data-href='q' data-type='t'>mnp <button>Click</button></li>
 <li data-href='r' data-type='t'>rst <button>Click</button></li>
 </ul>

我认为这种方法可以帮助你很多