CODEWITHSUNDEEP
javascriptjquery
user2487967
user2487967

Reputation: 83

Chain of selectors

Basically, I have to change a part of the page using jquery, but given the format of the page, I'm extremely confused as to what the chain of selectors has to be.

<span class="foo1">
 <span class="intro"><span class="bar">data I need to change</span></1>
 <span>...</span>
 <div class="body">This is the only place I can write code on the page</div>
</span>

How can I change the data I need to change in using jquery? I don't have server access, obviously.

The code MUST start with $(this), because that 1 in foo is always a random number, and I can't guess it. The code must work for all posts, based on the post the code is in.

If I could use normal nesting, I would.
The code must look something like
$(this).sibling('.intro').child('.bar').text('bar');

Upvotes: 1

Views: 1041

Answers (7)

user2487967
user2487967

Reputation: 83

the correct answer for my question ended up being

<script class="12345">
$('.12345').parents('.foo').find('.intro>.bar').text('whatever');
</script>

thanks for all your help :)

Upvotes: 0

HIRA THAKUR
HIRA THAKUR

Reputation: 17767

WORKING FIDDLE--CHAIN of Selectors

For nesting purpose,this is how you select: 

$('.foo1 >  .intro >  .bar').text("text to be changed");

The above code indicates that bar is inside intro and intro is inside foo1.

Incase,if you still have doubts,Refer this->Nested selectors

As others have suggested,

$('.foo1 .intro .bar').html("text to be changed");

this is also a perfect way to approach nesting.

Upvotes: 4

Ishan Jain
Ishan Jain

Reputation: 8171

You can use -

$(document).ready(function() { 
   $('.foo1 .intro .bar').html("new text");
});

Referance

Upvotes: 0

Dziad Borowy
Dziad Borowy

Reputation: 12589

here:

<span class="foo1">
    <span class="intro"><span class="bar">data I need to change</span></1>
    <span>...</span>
    <div class="body">
        <script>
        $(document).ready(function() { // you need this to make sure document is loaded
            $('.foo1 .intro .bar').html("new text");
        });
        </script>
    </div>
</span>

you need to wrap your js code in

$(document).ready(function() { /* your code here */ });

or - if jquery library is loaded at the bottom of the page:

window.onload = function () { /* your code here */ };

to make sure jquery and DOM elements are in place before you try to access them.

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48693

http://jsfiddle.net/u4djZ/1

$('.foo1>.intro>.bar').text('Data Changed!');

As MESSIAH pointed out, you should use the CSS child selector.

Upvotes: 0

Luca Rainone
Luca Rainone

Reputation: 16468

If I understand the question.

You can only add code in <div class="body">. But you want change the text inside .bar

<span class="foo1">
 <span class="intro"><span class="bar">data I need to change</span></span>
 <span>...</span>
 <div class="body">
This is the only place I can write code on the page

<script type="text/javascript">
       $('.foo1 .intro .bar').html('Changed!'); 
</script>

</div>
</span>

You could do also simply $('.bar').html('Changed') but if you have multiple span.bar that's more safe.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166031

Well from the small snippet of markup you've given, you can do it like this:

$(".bar").text("Whatever you want it to say instead");

But if there are other elements that match .bar you will need to be more specific:

// All of these would select that element
$(".intro .bar")
$(".foo1 .intro .bar")
$(".intro > .bar")
$(".intro:first-child .bar")

If you need to select it relative to the .body element:

// All of these would work
$(".body").siblings(".intro").find(".bar")
$(".body").parent().find(".bar")

I think you get the point... we can't give you a proper answer unless you expand your question.

Upvotes: 3

Related Questions