Solved

Mootools: how to select an element with two classes string

Posted on 2008-10-02
8
352 Views
Last Modified: 2013-11-11
Hi X-perts,

I need to select an element with class="trigger item4" via Mootools selector. For a single class it looks like

$E('.trigger')....

what is a correct syntax for two classes?

Thank you
0
Comment
Question by:andy7789
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 22635678
<html>
<head>
<title>Document/Page Title</title>
<style type="text/css">
div.first { background-color: #4499dd; }
div.second { background-color: #9944dd; }
div.third { background-color: #dd4499; }
}
</style>
<script language="javascript" src="mootools-1.2-core-nc.js">
</script>
</head>
<body>
<script language="javascript">
var myFirstElement  = new Element('div', {id: 'myFirstElement', 'class': 'first'});
var mySecondElement = new Element('div', {id: 'mySecondElement', 'class': 'second'});
var myThirdElement  = new Element('div', {id: 'myThirdElement', 'class': 'third'});
myFirstElement.innerHTML = 'First div';
mySecondElement.innerHTML = 'Second div';
myThirdElement.innerHTML = 'Third div';
var body = $(document.body);
body.adopt (myFirstElement);
body.adopt (mySecondElement);
body.adopt (myThirdElement);
var dElements = $$('.first, .second');
var ix=0;
for (ix=0; ix < dElements.length; ix++) {
      alert ( dElements[ix].className);
}
</script>
</body>
</html>
0
 

Author Comment

by:andy7789
ID: 22639299
sorry, we are talking about different things. My question is:

How to select an element by its class, when the class contains two classes, like class="first second"?

In other words:

<div class="first second">something</div>
0
 
LVL 14

Assisted Solution

by:ziffgone
ziffgone earned 100 total points
ID: 22639574
Try this:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {font-family:arial;}
.first {font-weight:bold}
.second {color:red;}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
    var elems=$$('p');
    for(var i=0;i<elems.length;i++){
       if(elems[i].hasClass('first second')){
          alert(elems[i].id);
       }
    } 
});
</script>
</head>
<body>
<p id="test_1" class="first">... Type content here!</p>
<p id="test_2" class="first second">... Type content here!</p>
<p id="test_3" class="second">... Type content here!</p>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:andy7789
ID: 22639642
I do not like the idea of making a cycle here.

can we call it somehow directly? For example, in jquery you can easily select an element like this:

$("tr[class='child1 child2 child3']"). etc

It selects all tr elements with class "child1 child2 child3"

How can I do the same in mootools ?
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22646301

$$('p.first.second')

Open in new window

0
 
LVL 14

Expert Comment

by:ziffgone
ID: 22647338
Oh, quite nice Sh0e.

Two notes however,

1- You can leave out the 'p' selector and simply find the '.first.second' element.

2- This still returns an array of a single element, see code below:


var obj=$$('.first.second');
var _obj1=obj[0];
 
// This will return the requested element

Open in new window

0
 

Author Comment

by:andy7789
ID: 22647440
Thank you guys. i have not tested it yet, but, if it works, it would be a great contribution to the mootools syntax. I have been searching docs and net for a long time, but could not find a simple answer for this.

it was one of the reasons, why often I used jquery + mootools as cold not find a simple solution via mootools.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 400 total points
ID: 22647510
The basic selector syntax is basically the same.
If you want more details you should read MooTools Docs and MooTorial, for fancier traversal.

$E('.first.second');
$$('.first.second')[0];
//But why? This is what .each is made for.
$$('.first.second').each(function(){dostuff});

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question