0

So I have this DOM structure for a news feed

<div class="content">
    <div class="row">
        <h2 class="date">01 July 2015</h2>
        <div class="thumbnail">
            <img src="somesource">
        </div>
        <div class="description">
            <a href="#link">link</a>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est!
       </div>
    </div>
</div>

//duplicated 5 times

I want to move the link before the h2.date and my jQuery code goes like this:

$('.content .row .description').each(function() {
    var hrefs = $('a', this);
    hrefs.insertBefore('.content .row h2.date');
});

Instead of getting it's link only, it keeps dumping all of the links from the other news also:

<div class="content">
    <div class="row">
        <a href="#link">link</a>
        <a href="#link2">link from news 2</a>
        <a href="#link3">link from news 3</a>
        <a href="#link4">link from news 4</a>
        <a href="#link5">link from news 5</a>
        <h2 class="date">01 July 2015</h2>
        <div class="thumbnail">
            <img src="somesource">
        </div>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est!
       </div>
    </div>
</div>

Any idea how to fix this?

1 Answer 1

1

Your .insertBefore() selector has no context, so your elements are inserted into the first element matching your selector:

$('.content .row .description').each(function() {
    var hrefs = $('a', this),
        $target = $(this).closest('.content').find('.row h2.date');
    hrefs.insertBefore($target);
});

JSFiddle

Or, avoid having to traverse up the DOM tree, by looping .content instead:

$('.content').each(function() {
    var $this = $(this),
        $href = $this.find('a'),
        $target = $this.find('.row h2.date');
    $href.insertBefore($target);
});

JSFiddle

4
  • 1
    was just starting an answer to suggest looping over outer elements also. Makes the most sense to me also
    – charlietfl
    Jul 19, 2015 at 20:49
  • hmmm, still not working.It still returning the bunch of links before the h2 from the other news. Anyway here's the actual link of the site, you might wanna see what's happening: fas.srmconsultancy.org The section below the "view all news" button. These are fetched content from an external site so i need to re-arranged the markup for me to be able to style it easily. Jul 20, 2015 at 7:33
  • @George , alright here you go: for the 1st one: jsfiddle.net/0gpfgdb4 for the 2nd one: jsfiddle.net/rd9keLn4 Jul 20, 2015 at 18:15
  • @George , thanks for your help i think i got it to work. There's no problem with the solution you've given. My problem is with the scoping of my selector. The .description class is causing the trouble so i need to remove it. Thanks for the help of jQuery facebook group too (Kim). Jul 20, 2015 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.