在jQuery中选择一个具有两个属性的元素 [英] Select an element in jquery with two attribiutes

问题描述

https://jsfiddle.net/The95Chaps/2L4t9saq/92/是我的代码

var createGrid=function(s,i,a,e){for(var r=1;r<i+1;r++){for(var c="<span class='inline'>",n=1;n<s+1;n++){c=c+"<div class='pixels' x='"+n+"' y='"+r+"'></div>"}c+="</span>",$("#main").append(c)}$(".pixels").css("background-color","gray"),$(".pixels").css("width",a),$(".pixels").css("height",e)};
var modGrid = function(code){
    for(var n=1;n<gridx+1;n++){
        for(var i = 1; i<gridy+1; i++){
        $("[x="+i+"]")
    }
    }
}
var gridx = 64
var gridy = 64
createGrid(gridx,gridy,1,1)

.

<div canvas="canvas" id="main"></div>

.

.inline { display: block }
.pixels { display: inline-block }
#main {
  font-size:0;
}

只需忽略第一行，它所做的就是创建数组

所以目前它创建了一个64 x 64的网格，每个像素大小为1像素，像素总数为4096像素

so currently it creates a 64 by 64 grid, each pixel is 1 pixel in size, and the total amount of pixels are 4096 pixels

在我的modGrid()函数中，它将能够接收一个JS数组，然后将其转换为图像，但是我在使用jquery选择器时遇到了一些麻烦.

in my modGrid() function it is going to be able to take in a JS array and then convert it into an image, but i am having some trouble with jquery selectors.

目前，我知道如何选择具有特定属性的元素的唯一方法是使用$("thing[attribute=blah]").somefunction();，而我只是想知道

currently the only way i know how to select an element with specific attribiutes is using $("thing[attribute=blah]").somefunction(); and i was just wondering

由于我要通过2个属性(x和y)进行选择，我该怎么做?:

since i am selecting by 2 attributes (x and y) how would i do this?:

在for(var i){};循环内，它应该能够选择属性x等于i的像素 和属性y等于n的像素，并使用 $(selector[x=yada and y=yada).css("background-color","blue");

inside the for(var i){}; loop it should be able to select a pixel with attribiute x to equal i and attribiute y to equal n, and change the selected pixels color to blue, using $(selector[x=yada and y=yada).css("background-color","blue");

推荐答案

您不能一次使用两个属性选择器.

You cannot use two attribute selectors at once.

但是您可以做的是使用一个...因此您获得了一组匹配的元素.在该集合中，只需找到一个也与第二个属性匹配的对象即可.

But what you can do is to use one... So you get a collection of matching elements. Inside this collection, just find the one that is also matching the second attribute.

.each() 循环将起作用.

An .each() loop will do.

var createGrid=function(s,i,a,e){for(var r=1;r<i+1;r++){for(var c="<span class='inline'>",n=1;n<s+1;n++){c=c+"<div class='pixels' x='"+n+"' y='"+r+"'></div>"}c+="</span>",$("#main").append(c)}$(".pixels").css("background-color","gray"),$(".pixels").css("width",a),$(".pixels").css("height",e)};
var modGrid = function(code){
    for(var n=1;n<gridx+1;n++){
        for(var i = 1; i<gridy+1; i++){
        $("[x="+i+"]")
    }
    }
}
var gridx = 64
var gridy = 64
createGrid(gridx,gridy,1,1)

// To target the pixel at (10,10)
$("[y='10']").each(function(){
  if($(this).is("[x='10']")){
    $(this).css("background-color","blue");
  }
});

.inline { display: block }
.pixels { display: inline-block }
#main {
  font-size:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div canvas="canvas" id="main"></div>

这篇关于在jQuery中选择一个具有两个属性的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！