Javascript jQuery-将数据从jQuery函数传递到特定的div？

我试图将数据从一个函数传递到一个特定的div，但我似乎无法让它工作。我正在制作一个图库查看器，我只想通过计数器来显示页面中每个图库的图片和文件总数

代码如下：

jQuery

$(document).ready(function () {
    $('.photoset').each(function () {
        $(this).data('counter', 0);
        $items = $(this).find('img')
        $(this).data('numItems', $items.length);
    });



    var showCurrent = function (photoset) {
        $items = photoset.find('img');
        var counter = photoset.data('counter');
        var numItems = $items.length;
        var itemToShow = Math.abs(counter % numItems);

        $items.fadeOut();
        $items.eq(itemToShow).fadeIn();
    };

    $('.photoset').on('click', function (e) {
        e.stopPropagation();
        var photoset = $(this);
        var pWidth = photoset.innerWidth();
        var pOffset = photoset.offset();
        var x = e.pageX - pOffset.left;
        if (pWidth / 2 > x) {
            photoset.data('counter', photoset.data('counter') - 1);
            if (photoset.data('counter') < 0)
                photoset.data('counter', photoset.data('numItems') - 1);
            showCurrent(photoset);
        } else {
            photoset.data('counter', photoset.data('counter') + 1);
            if (photoset.data('counter') > photoset.data('numItems') - 1)
                photoset.data('counter', 0);
            showCurrent(photoset);
        }
        $(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'))
    });
});

将数据传递给“导航情报员”部门，但它就是不起作用。有人知道在这种情况下该怎么办吗？抱歉，如果这是一个愚蠢的问题，我对jQuery非常陌生

更新

以下是呈现的HTML页面：

<div class="container">

    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">
            <br />
            Galeria Um
            <br />
        </div>
    </div>
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
    <div class="row">
            <div class="photoset center-block">



                    <br />
                    <img src="/images/572fdd6b-13eb-48d2-8940-23da73e056c0.JPG" style=" " />
                    <br />
                    <br />
                    <img src="/images/018a55be-a8a7-4412-8415-1678d01eb6a2.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/e5b0bdcb-d517-49a5-818b-245d46c0a0d9.JPG" style="display: none " />
                    <br />

            </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">
            <br />
            Galeria Dois
            <br />
        </div>
    </div>
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
    <div class="row">
            <div class="photoset center-block">



                    <br />
                    <img src="/images/fdc2e9fd-978a-4150-87af-483e34f68798.JPG" style=" " />
                    <br />
                    <br />
                    <img src="/images/b17d169d-e5ed-45cd-9901-1d9dc294c873.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/3ad1ae20-7102-4d69-b658-7b3d8cbfb9e8.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/4ef03a84-da00-4f93-b3a2-839ac2ec9ac2.JPG" style="display: none " />
                    <br />

            </div>

    </div>

盔甲
















多瓦伽雷菌

---

因此，由于您是jQuery新手，

$（此）

的使用基本上意味着“我开始处理的元素”，在您的例子中，它是

.photoset

。所以

$（this）=$（'.photoset'）

如果要将该行文本放入

.nav informer

div，则需要将

$（此）

更改为

$（'.nav informer'）

更新

因此，您似乎需要遍历整个层次结构。每个“库”都是

容器吗？如果是，请尝试以下方法：

$(this).closest('.container').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

.closest（）
遍历层次结构，试图找到最接近的开始元素的父元素。（在我们的例子中，
$（这个）
）

“.find（）”的作用正好相反，它会向下遍历层次结构，从前面的一点查找相关元素的第一个实例

将它们加在一起，我喜欢做的是
.closest（）
到您试图查找的元素的父元素，然后
.find（）
找到后面的元素。我想做
.parents（）
，
.children（）
和
.hildren（）
会变得一团糟

更新2

好的，我现在明白了-你导出每个图库的方式最终可能会有点冒险，如果可能的话，我建议将你的图库和告密者包含在同一个容器中，但如果你打算这样离开，请尝试以下方法：

$(this).closest('.container').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

因此，使用
.parent（）
将只遍历一个父级，如果您需要向上走得更远，可以使用
.parents（）
（带S）或我最喜欢的
.closest（）
。然后，一旦你达到了你需要去的级别，你可以使用
.sibbins（）
，或者在我们的例子中，因为你的
.nav informer
总是在
.photoset
之前的
行中，你需要使用
.prev（）
。这将选择直接写入当前处于同一级别的div之前的div

查看快速示例。
您好！谢谢你的回答！我以前尝试过这种方法，但由于我为每个库生成了一个新的$（'nav-informer'），因此我最终用这种方法更改了所有库。我只需要更改我当前所在的图库。jQuery函数只在我单击当前图库时指向它，因此我尝试使用$（this）.@n.ab，我想我现在明白了，我已经更新了我的答案每个图库都是一个photoset div，我尝试用你的答案更新并将“.container”替换为“.photoset”，但没有成功。文本没有出现在页面中。@n.ab，我知道了，有多少
.nav告密者
s？每个photoset是否有一个？@n.ab，你能用一个带有多个photoset和多个nav信息的呈现HTML的例子来更新你的问题吗？
$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));