Question: I need to display several divs inline.
Since all divs must have the same width of the viewport and
they must be in the same line, I'm using **white-space: nowrap**
in the container.

```css
.container {
    white-space: nowrap;
}
.container > div {
    background-color: red;
    width: 100%;
    border: 2px solid;
    display: inline-block;
    padding: 20px;
    text-align: justify;
}
```

```html
<div class="container">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>tempor incididunt ut labore et dolore magna aliqua.
        <p></p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div>OPTION 2</div>
    <div>OPTION 3</div>
    <div>OPTION 4</div>
    <div>OPTION 5</div>
    <div>OPTION 6</div>
    <div>OPTION 7</div>
    <div>OPTION 8</div>
    <div>OPTION 9</div>
    <div>OPTION 10</div>
</div>
```

The problem is that only the first div is displayed correctly in the normal top
position. The other divs are shown with too much top margin. How can I prevent that?

I want all the divs are displayed in the same top position.

Thanks in advance

Answer: 
Assuming `this` is the object with ID `A`

```
$(this).closest('.message').prevUntil('.message:has(object)').prev().find('object');

```

[**FIDDLE**](http://jsfiddle.net/afzfcn02/)

traverses up to the closest `.message` then checks previous elements until it finds one that contains an `object` tag, then it stops, but it stops at the element before that tag, so we call `prev` to go one step further, and then use `find` to find the object tag.
Another option:

```
var objs=$('object').toArray();
$('.message').on('click',function(){
    var elem=$(this).children().get(0);
    if(objs.indexOf(elem)-1>=0){
        console.log(objs[objs.indexOf(elem)-1]);
        console.log(objs[objs.indexOf(elem)-1].id);
    }
});

```