使用jQuery选择不相关的元素

Using jQuery to select unrelated elements

本文关键字：元素 不相关 选择 jQuery 使用      更新时间：2023-09-26

我是jQuery的新手，正在编写一个脚本来根据它所依赖的元素是否已被选中来更改某个元素的颜色。我的第一个问题是我不能编辑的html结构和结构形成的方式是给我造成一些问题。基本上就是这个结构:

<div class="item">
    <div class="teamNames">
        <span>Team 01</span>
        <span>Team 02</span>
    </div>
    <div class="teamBlocks">
        <div class="block 01">
            <div>Home</div>
            <div>0.65</div>
        </div>
        <div class="block 02">
            <div>Home</div>
            <div>0.65</div>
        </div>
    </div>
</div>

球队的名字已经被绝对地放置在块上，所以块的内容看起来像"球队名字Home 0.65"。当一个块被选中时，它的类变成:

class="block 01 sel"

我能够改变颜色的"家"answers"0.65"文本很容易与CSS，但改变团队名称(团队01/团队02)被证明是复杂得多，我想知道是否有可能做到这一点或javascript或jQuery ?同样值得注意的是，团队名称永远不会相同，因此根据内容进行选择是不可能的

要更改一个特定的团队，您需要给他们唯一的标识符，例如:

<div class="teamNames">
    <span id="item1">Team 01</span>
    <span id="item2">Team 02</span>
</div>

没有你改变选择特定的span元素使用jQuery。例如，您想更改Team 01:

$("#item1").text("New Team Name");

希望这就是你想做的。

如果我答对了问题，你可以用jquery更改名称，像这样:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".teamNames span:first").html("hello world");
    });
</script>

您需要通过所选块查找团队元素吗?如果是，可以使用$。获取所选球队的索引函数:

var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
    var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
    currentTeamName.text('aaaa');
}
http://jsfiddle.net/JRFv6/

是否查找class="block 01 sel" 

$(".block").click(function(){
    $(".block").removeClass("sel");
    $(this).addClass("sel");
});
演示

在不更改HTML的情况下更改没有id的元素的方法

<!DOCTYPE HTML>
<html>
    <head> 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    </head>
    <body>
        <div class="item">
            <div class="teamNames">
                <span>Team 01</span>
                <span>Team 02</span>
            </div>
            <div class="teamBlocks">
                <div class="block 01">
                    <div>Home</div>
                    <div>0.65</div>
                </div>
                <div class="block 02">
                    <div>Home</div>
                    <div>0.65</div>
                </div>
            </div>
        </div>
        <script>
            $(".teamNames span:eq(0)").html("New-Team-Name<br>");
            $(".teamNames span:eq(1)").text("---- New Team Name");
        </script>
    </body>
</html>
相关文章：