jquery loop through multiple elements, and change multiple elements at the same time?

Question

I have the following html example

<div id="main"><input type="hidden" name="bilbo" value="0"><a id="baggins" href="somewhere.com"></div>
<div id="main"><a id="baggins" href="somewhere-else.com"></div>
<div id="main"><a id="baggins" href="somewhere-elseagain.com"></div>

What I need to do is loop through each div with the id of main and find if the input type hidden exists.

Then I need to change the href of that link in the same div as the input hidden, each time, there will be more than one.

Any help would be appreciated.

Just a sidenote, an id has to be unique, use classes instead. — Marcel Gwerder
– Marcel Gwerder, Commented Apr 26, 2013 at 13:30
since this is a rendered rss feed, it is being transformed with xslt, so each of the divs is built in a for-each... — user1689274
– user1689274, Commented Apr 26, 2013 at 13:33
since they are built in a for each the if($('input[name=bilbo]')) doesn't work, because it only reads the first one and not the subsequent divs after that — user1689274
– user1689274, Commented Apr 26, 2013 at 13:35

Terry Young · Accepted Answer · 2013-04-26 13:53:10Z

2

Since you have no control over the HTML, forget the ID then.

$('div:has(input[type=hidden]) a')

This means, give me all hyperlinks that are nested inside a div element that must have a hidden input nested in the DIVs.

You should have roughly the following

$('div:has(input[type=hidden]) a').each(function (i, link) {
    $(link).attr('href', 'whatever.bla');
});

In case you are fetching the rss feed html into a string, then you can probably do this:

// assuming you fetched the rss feed as a string or responseText
var htmlString = '<div id="main"><input type="hidden" name="bilbo" value="0"><a id="baggins" href="somewhere.com"></div><div id="main"><a id="baggins" href="somewhere-else.com"></div><div id="main"><a id="baggins" href="somewhere-elseagain.com"></div>';

var $feeds = $(htmlString);

$feeds.find('div:has(input[type=hidden]) a').each(function (i, link) {
    $(link).attr('href', 'whatever.bla');
});

edited Apr 26, 2013 at 13:53

answered Apr 26, 2013 at 13:41

Terry Young

3,5311 gold badge22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1689274 Over a year ago

What if I wanted to loop through and see which divs did NOT contain the input hiddens?

user1689274 Over a year ago

nevermind, I found that one. $('div:not(:has(input[type=hidden])) a')

Terry Young Over a year ago

$('div:not(:has(input[type=hidden])) a')

Terry Young Over a year ago

Right, you gotta love jQuery just for this

tymeJV · Accepted Answer · 2013-04-26 13:41:33Z

2

Assuming you use classes and not repeating IDs

$(".main").each(function() {
    var isHidden = $(this).children("input[type='hidden']").length > 0;
    if (isHidden) {
        $(this).children("input[type='hidden']").nextAll("a").each(function() {
            //Change the href now
            $(this).attr("href", "newlink");
        });
    }
});

Demo: http://jsfiddle.net/7Rc9X/

answered Apr 26, 2013 at 13:41

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Collectives™ on Stack Overflow

jquery loop through multiple elements, and change multiple elements at the same time?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related