Question

在我的页面中，我想更改div id = question中id为answer1的div的类名。我怎样才能做到这一点？谢谢。

$('question1 answer1').addClassName('new_name');

<div id="question1">
   <div id="answer1" class="old_name">
   </div>
</div>

<div id="question2">
   <div id="answer2" class="old_name">
   </div>
</div>

Answer 1

只需$('answer1')即可获得您想要的div元素的引用。 $函数返回具有给定id字符串的元素（如果没有找到，则返回null）。请注意，使用$时不使用选择器字符串 - 它仅对ID进行操作。

$$函数接受一个CSS选择器字符串并返回所有匹配元素的数组，如果没有匹配则返回一个空数组。如果您想要或需要走这条路线，您可以找到相同的div：

$$('#question1 .answer1')[0]

使用上述任一方法获取元素参考后，您可以使用addClassName或removeClassName或任何其他可用的元素方法。

Answer 2

因此，正如已经指出的那样，任何选择器方法都需要某种迭代器，因此您不能只将方法应用于返回的所有对象。您将在Element.select的文档中注意到这应该可以减轻必须将对象显式转换为数组，但我在jsfiddle上没有运气。但是，我确实尝试了以下内容：

 $('answer2').addClassName('new_name');

它运作得很好。我不知道问题是你是否试图遍历原始元素对象中的DOM（通过使用question1 answer1），这需要对象/数组迭代器，或者它只是代码中其他地方的打嗝。但是在您的具体示例中，由于您知道要更改类的实际元素的id，因此上述代码应该可以正常工作，而无需指定父元素或使用任何类型的数组索引。

我会承认prototypejs让我失望，因为他们使用与Enumerable对象相同的Element对象的方法名称，所以我看到select的第一个实例，并认为它看起来很直接。现在已经看到几乎每个类/方法都要求你设置一个选择器并对其进行转换或手动遍历它，我肯定会说这对于使用jquery来说会更容易，并且你最初的评论是他们的几乎相同在这种情况下尤其不正确。也许protojs提供了一些jquery没有的功能，也许你的代码与protojs相关（我在一个项目上工作了一年，不得不使用YUI，这是一个更大的噩梦，相信我），但是jquery已经设置好了与prototypejs很好，所以在这些情况下，我会考虑使用两者。在jquery中，代码应该是：

jQuery.noConflict();  // Avoids $ fight between jquery and prototypejs
jQuery( '#question1 #answer1' ).addClass('new_name');

或者，首先删除旧的：

jQuery.noConflict();  // Avoids $ fight between jquery and prototypejs
jQuery( '#question1 #answer1' )removeClass('old_name').addClass('new_name');

此外，原型有一个toggleClass方法，可能也是不必要的深奥，但也许你应该阅读：toggleClassName

我不会浪费我的时间在这上面（因为我不喜欢考虑学习新框架而浪费时间），除了他们的文档虽然有吸引力，却有最糟糕的例子我从未见过。他们都假设你有一些基本的想法，没有一个友好的现实世界的例子或超链接到实例和类之间的差异，他们区分两者的例子是相同。我肯定会在今天晚些时候花些时间找到你问题的真正最佳答案，出于憎恨和骄傲，如果没有别的，但如果它真的归结为必须迭代每个时间，只需使用vanilla js并在它实际有用时使用此框架。

更改div的类名

2 个答案: