Solved

Mootools: how to select an element with two classes string

Posted on 2008-10-02
8
348 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
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 28

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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now