Chain of selectors

Question

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');

I want to change some text within the bar class, and I don't know the right chain of selectors in jquery to correctly select the class bar. `$(this).parent('foo1').child('.intro').child('.bar').text('whatever');` doesn't work — user2487967, Jul 26 '13 at 09:57
Not related to the question itself, but your HTML is invalid. `div` is not a permitted content in a [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span). — Teemu, Jul 26 '13 at 09:58
I would like to down vote your question but will give you a chance, make sure you specify each and every point before posting a question :) — Mr. Alien, Jul 26 '13 at 10:09

score 4 · Answer 1 · edited May 23 '17 at 10:25

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.

score 3 · Answer 2 · answered Jul 26 '13 at 09:57

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.

score 0 · Answer 3 · answered Jul 26 '13 at 09:58

0

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.

answered Jul 26 '13 at 09:58

Luca Rainone

16,138
2
38
52

You understood the question correctly (The language I use when it comes to coding seems to confuse people who actually know what they're doing, but doesn't confuse people who have no idea how to code, it's really funny) However, I forgot to mention, I HAVE to use $(this) because foo1 changes for every single post that contains that span. But I have to only do it to that particular post. – user2487967 Jul 26 '13 at 10:01
how change foo1? foo1, foo2, foo3... ? – Luca Rainone Jul 26 '13 at 10:05
no. foo# is always a different number, that I can't guess. I can't use normal selectors or I would. If all of these spans didn't appear in multiple places on the page I'd just use the simplest selector, but every single one of these spans appear on page multiple times. – user2487967 Jul 26 '13 at 10:08

Dziad Borowy · Answer 4 · 2013-07-26T10:03:48.580

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.

score 0 · Answer 5 · answered Jul 26 '13 at 10:00

0

http://jsfiddle.net/u4djZ/1

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

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

answered Jul 26 '13 at 10:00

Mr. Polywhirl

42,981
12
84
132

score 0 · Answer 6 · edited May 23 '17 at 10:32

0

You can use -

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

Referance

edited May 23 '17 at 10:32

Community

1
1

answered Jul 26 '13 at 10:07

Ishan Jain

8,063
9
48
75

score 0 · Answer 7 · answered Jul 26 '13 at 14:37

0

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 :)

answered Jul 26 '13 at 14:37

user2487967

83
5

Chain of selectors

7 Answers7