Question

在标题中这是一个相对困难的解释，所以这是一个进一步的解释。

假设我通过执行以下操作来扩展JQuery：

$.fn.extend({
    Example:function(){
        $(this).html($(this).html());
    }
});

然后我用一个选择器在多个元素上调用该方法，例如：

$(document).ready(function(){
    $(".element").Example();
});

HTML的样子：

<div class="element">Element 1</div>
<div class="element">Element 2</div>

最终产品如下所示：

Element 1
Element 1

显然，这只是一个非常简单的例子，但是让每个元素引用自身的正确程序是什么。这看起来很奇怪，因为在调用$（this）.html（＆＃34;更改＆＃34;）时;它适用于每一个，但是当调用$（this）.html（）时，它似乎引用了它遇到的第一个。

我是否把这一切搞砸了，有人会介意帮助我解决这个问题。提前感谢任何建议！

Answer 1

问题是因为html()是选择器中所有元素的集合。获取集合的each只会返回集合中 first 元素的HTML。因此，您的代码会将所有元素的HTML设置为与第一个匹配。

要解决此问题，您可以使用this调用将$.fn.extend({ Example: function() { return $(this).each(function() { $(this).html($(this).html() + ' foo'); }); } }); $(document).ready(function() { $(".element").Example(); });的上下文更改为每个元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1</div>
<div class="element">Element 2</div>

html()

或者，您可以向$.fn.extend({ Example: function() { return $(this).html(function(i, html) { return html + ' foo'; }); } }); $(document).ready(function() { $(".element").Example(); });提供一个函数，该函数将依次应用于每个元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1</div>
<div class="element">Element 2</div>

<Window x:Class="Ghostware.Scheduler.Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Ghostware.Scheduler.Example"
        xmlns:scheduler="clr-namespace:Ghostware.Scheduler;assembly=Ghostware.Scheduler"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="800">
    <Grid IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!--<scheduler:Scheduler Margin="5" />-->
        <local:BorderGrid Grid.Row="0">
            <local:BorderGrid.ColumnDefinitions>
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="17" />
            </local:BorderGrid.ColumnDefinitions>
            <local:BorderGrid.RowDefinitions>
                <RowDefinition Height="22" />
                <RowDefinition MinHeight="22" />
                <RowDefinition Height="2" />
            </local:BorderGrid.RowDefinitions>

            <StackPanel Grid.Row="0" Grid.Column="1" Background="LightBlue">
                <TextBlock Text="Monday 11 July" TextAlignment="Center" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.Column="2" Background="LightBlue">
                <TextBlock Text="12 July" TextAlignment="Center" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.Column="3" Background="LightBlue">
                <TextBlock Text="13 July" TextAlignment="Center" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.Column="4" Background="LightBlue">
                <TextBlock Text="14 July" TextAlignment="Center" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.Column="5" Background="LightBlue">
                <TextBlock Text="15 July" TextAlignment="Center" />
            </StackPanel>
            <StackPanel Grid.Row="0" Grid.Column="6" Background="LightBlue"></StackPanel>

            <StackPanel Grid.Row="1" Grid.Column="1" Background="LightGray"></StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="2" Background="LightGray"></StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="3" Background="LightGray"></StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="4" Background="LightGray"></StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="5" Background="LightGray"></StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="6" Background="LightGray"></StackPanel>

        </local:BorderGrid>
        <ScrollViewer Grid.Row="1">
            <local:BorderGrid>
                <local:BorderGrid.ColumnDefinitions>
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </local:BorderGrid.ColumnDefinitions>
                <local:BorderGrid.RowDefinitions>
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                    <RowDefinition Height="44" />
                </local:BorderGrid.RowDefinitions>

                <TextBlock Text="00 00" Grid.Row="1" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />
                <TextBlock Text="01 00" Grid.Row="3" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />
                <TextBlock Text="02 00" Grid.Row="5" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />
                <TextBlock Text="03 00" Grid.Row="7" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />
                <TextBlock Text="04 00" Grid.Row="9" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />
                <TextBlock Text="05 00" Grid.Row="11" Grid.Column="0" TextAlignment="Right" Margin="0,2,5,0" />

                <StackPanel Grid.Row="3" Grid.Column="2" Grid.RowSpan="5" Background="Red" Margin="0,0,20,0" />
            </local:BorderGrid>
        </ScrollViewer>
    </Grid>
</Window>

$（this）引用扩展JQuery方法中的第一个选择器元素

1 个答案: