Question

I am having a problem with jquery going a bit too far on pattern matching of CSS classes and IDs.

I have some markup that looks like this:

  <div id="blah">
    <div class="level2">
      <input type="text" />
    </div>
    <div class="levelA">
      <div class="level2">
        <input type="text" value="foo"/>
      </div>
    </div>
  </div>
  <input type="text" value="bar" />

I want for the 3 inputs to say

• Hello
• Foo
• Bar

so I have this line of jquery:

$('#blah .level2 input').val('hello');

the problem now is that jquery is a bit too liberal in it’s pattern matches and matches both the first and second.

How can I prevent this kind of thing from happening?

A live example is at http://jsbin.com/opelo3/4

Answer 1

You want

$('#blah > .level2 input').val('hello');

> means direct descendant.