1

基本上，我必须使用 jquery 更改页面的一部分，但是考虑到页面的格式，我对选择器链必须是什么感到非常困惑。

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

如何更改使用 jquery 时需要更改的数据？显然，我没有服务器访问权限。

代码必须以 $(this) 开头，因为 foo 中的 1 总是一个随机数，我猜不出来。根据代码所在的帖子，该代码必须适用于所有帖子。

如果我可以使用正常的嵌套，我会的。
代码必须类似于
$(this).sibling('.intro').child('.bar').text('bar');

4

7 回答 7

4

工作小提琴——选择器链

出于嵌套目的，这是您选择的方式： 

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

上面的代码表明bar在intro里面，intro在foo1里面。

万一，如果你还有疑问，参考this-> Nested selectors

正如其他人所建议的那样，

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

这也是处理嵌套的完美方式。

于 2013-07-26T09:58:58.820 回答
3

好吧，从您给出的一小段标记中，您可以这样做：

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

但是，如果还有其他匹配的元素，.bar您将需要更具体：

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

如果您需要相对于.body元素选择它：

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

我想你明白了......除非你扩大你的问题，否则我们无法给你一个正确的答案。

于 2013-07-26T09:57:22.283 回答
0

这里：

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

你需要将你的js代码包装在

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

或者 - 如果在页面底部加载了 jquery 库：

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

确保 jquery 和 DOM 元素在您尝试访问它们之前就位。

于 2013-07-26T09:58:43.717 回答
0

http://jsfiddle.net/u4djZ/1

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

正如 MESSIAH 指出的那样，您应该使用CSS 子选择器。

于 2013-07-26T10:00:35.310 回答
0

您可以使用 -

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

参考

于 2013-07-26T10:07:14.313 回答
0

我的问题的正确答案最终是

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

感谢你的帮助 ：）

于 2013-07-26T14:37:51.293 回答
0

如果我理解这个问题。

您只能在<div class="body">. 但是您想更改 .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>

你也可以简单地做$('.bar').html('Changed')，但如果你有多个span.bar，那就更安全了。

于 2013-07-26T09:58:01.837 回答