选择器链答案

【问题标题】：Chain of selectors选择器链
【发布时间】：2013-07-26 22:37:51
【问题描述】：

基本上，我必须使用 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');

【问题讨论】：

我想更改栏类中的一些文本，但我不知道 jquery 中正确的选择器链来正确选择类栏。 $(this).parent('foo1').child('.intro').child('.bar').text('whatever'); 不起作用
与问题本身无关，但您的 HTML 无效。 div 不是 span 中允许的内容。
为什么在 html 中使用 </1>
我想对您的问题投反对票，但会给您一个机会，请确保在发布问题之前指定每一点：)
接受你觉得值得的答案！！！

标签： javascript jquery

【解决方案1】：

WORKING FIDDLE--CHAIN of Selectors

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

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

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

以防万一，如果你还有疑问，请参考这个->Nested selectors

正如其他人所建议的，

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

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

【讨论】：

【解决方案2】：

从你给出的标记的小sn-p，你可以这样做：

$(".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")

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

【讨论】：

【解决方案3】：

如果我理解了这个问题。

您只能在<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，那就更安全了。

【讨论】：

你正确理解了这个问题（我在编码时使用的语言似乎会让那些真正知道自己在做什么的人感到困惑，但不会让那些不知道如何编码的人感到困惑，这真的很有趣）但是，我忘了提及，我必须使用 $(this) 因为 foo1 会针对包含该跨度的每个帖子进行更改。但我必须只针对那个特定的帖子这样做。
如何改变foo1？ foo1, foo2, foo3... ?
没有。 foo# 总是一个不同的数字，我猜不出来。我不能使用普通的选择器，否则我会。如果所有这些跨度都没有出现在页面上的多个位置，我只会使用最简单的选择器，但是这些跨度中的每一个都多次出现在页面上。

【解决方案4】：

http://jsfiddle.net/u4djZ/1

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

正如 MESSIAH 指出的那样，您应该使用 CSS child selector。

【讨论】：

【解决方案5】：

这里：

<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 元素就位。

【讨论】：

【解决方案6】：

你可以使用 -

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

Referance

【讨论】：

【解决方案7】：

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

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

感谢您的帮助:)

【讨论】：