Question

我希望能够让页面上的任何元素仅通过其附加属性...例如在我拥有的页面上

 <div id="divId" name="john" style="background-color: red;">
This is alot of text
</div>

我想获取此元素并更新其背景颜色......但无论如何它可能不是div，名称可能是ul和li ...

所以例如Iv找到了一个我可以做的例子：

<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
</div>

如果我说

alert($( "ul[data-continent='" + 'North America' + "'] li[data-species='" + 'California condor'  +"']").html());

这将输出'Critically Endagered'

我想应用这种方式将元素添加到我的原始div ...所以我尝试了

 var e1 = $("div[name='" + 'john' + "']" ).html()
     e1.style.backgroundColor = "lightblue";

这是返回undefined ...我知道还有其他方法来获取元素但我想学习这种方式我做错了什么

谢谢

Answer 1

首先，您不必要地将信息连接在一起。你应该做这样的事情：

var e1 = $("div[name='john']" ).html()

只有当你在某个地方的选择器中放置一个变量时，才真正需要连接，而你并没有这样做。还不需要.html()，因为它会获得div的HTML内容，而您只想更改元素的CSS。

其次，此时e1是一个jQuery对象，因此当你这样做时，尝试使用普通的vanialla JavaScript来访问属性会失败：

e1.style.backgroundColor

您可以使用.get(0)或[0]取消引用jQuery对象并访问基础节点，如：

e1[0].style.backgroundColor

或

e1.get(0).style.backgroundColor

但正确的方法是继续使用jQuery方法，例如.css()：

e1.css('backgroundColor', 'lightblue');

示例：

＆＃13;

var e1 = $("div[name='john']")
//e1.get(0).style.backgroundColor = 'lightblue';
//e1[0].style.backgroundColor = 'lightblue';

e1.css('backgroundColor', 'lightblue');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divId" name="john" style="background-color: red;">
  This is alot of text
</div>

＆＃13;

Answer 2

您的代码中存在两个问题。

首先，您获得了带有.html()的html，它返回实际的html文本，而不是元素，因此您无法设置样式。

以下将解决它

var e1 = $("div[name='" + 'john' + "']" ).get(0);
    e1.style.backgroundColor = "lightblue";

此外，您可以使用.css jquery方法设置元素的样式。

var e1 = $("div[name='" + 'john' + "']" );
    e1.css({
             'background-color': "lightblue"
           });

最后，如果您不想将自己限制为div元素，只需从选择器中删除div

var e1 = $("[name='" + 'john' + "']" )

它将选择name属性为john的所有元素作为其值。

Answer 3

它可以非常简单，使用变量选择数据属性：

   var mychoice = "North America";
   var mything =$('*[data-continent="' + mychoice + '"]');

与任何属性相同

使用Jquery检索元素

3 个答案: