我在 jQuery .each() 函数中缺少什么？

Question

我正在尝试找出/修复此功能，但似乎无法查明问题/无法找到使其正常工作的方法。

基本上我的 CMS 会吐出我想要的某些 href：

第 1 部分）更改目标 href URL

第 2 部分）更改按钮的文本

现在我只有 2 个此类按钮的实例，所以这是我的控制台中打印的内容：

第 1 部分） 对于这部分，我得到了正确的 url，没有我想要删除的字符。

第 2 部分）按钮文本的两个实例（查看全部），然后是第一个按钮的正确 btnParent 变量，然后是第二个按钮，最后是“产品”的一个实例。

我的问题是，我不知道如何：

第 1 部分）将剥离的 URL 作为 each 函数发送回其各自按钮的 href。

第 2 部分）让 each() 函数将每个实例的新文本打印为“查看全部 + BLAH + 产品”，然后将新文本附加到相应的按钮。

代码如下：

function viewMoreBtn() {
	var btnMain = $("li:contains('See All')");
	var btnText = $("li:contains('See All')").text();
	var btnParent = $("li:contains('See All')").parent('ul').prev('li').text();

// PART 1 - STRIP LINK URL OF -_-// CHARACTERS
	$.each(btnMain, function(i, v) {
		v = $(this).find('a').attr('href').replace('-_-//', '');
		console.log(v);
	});

// PART 2 - ADD LABEL TO HTML TEXT OF BTN
	$.each(btnMain, function(index, value) {
		value = (btnText + btnParent + 'Products');	
		$(btnMain).text(value);
		console.log(value);
	});
}
viewMoreBtn();

谢谢。

Answer 1

由$(...) 返回的jQuery 对象已经有一个each 方法。该元素作为this 上下文传递。您可以在 jQuery 中进一步使用它来作用于作用域上下文中的对象。基本上，你有正确的代码，只是在错误的范围内。

第 1 部分

btnMain.each(function() {
    var $li = $(this);
    var $a  = $li.find('a');
    var desiredUrl = $a.attr('href').replace('-_-//', '');
    $a.attr('href', desiredUrl);
});

第 2 部分

btnMain.each(function() {
    var $li = $(this);
    var btnText = $li.text();
    varbtnParent = $li.parent('ul').prev('li').text();
    value = (btnText + btnParent + 'Products'); 
    console.log(value);

    $li.find('a').text(value);

});

Answer 2

请参阅@Zequ 对返回的 btnMain 中的 each() 函数的迭代的回答。

这就是 $.each( obj, function( key, value ) 的工作原理：你迭代 btnMain，对于 $.each() 的每次迭代，函数将迭代的索引分配给 i 和值btnMain 在 v 的那个索引处。

$.each(btnMain, function(i, v) {
    //v = $(this).find('a').attr('href').replace('-_-//', '');
    console.log(i); // I am the index of $.each() iterator
    console.log(v); // I am the node from the btnMain array
    // I don't know if this is right without seeing your HTML, but it seems like what you want
    v.find('a').attr('href').replace('-_-//', '');
});

第二个 $.each() 遵循相同的模式。

Answer 3

如果我理解正确的话，你会混淆你的变量。

$.each 是用于传递的数组/对象的每个元素的函数。它给你一个索引和元素，检查the reference

在第 1 部分中，你将 v 定义为你想要的字符串，你根本没有改变元素，你需要这样的东西：

$.each(btnMain, function() {
    // you're saying you got the correct URLs, so the only thing you need to do is to change the element afterwards
    var element = $(this).find('a');
    v = element.attr('href').replace('-_-//', '');
    element.attr('href', v);
});`

您也可以使用btnMain.each 代替$.each

在第 2 部分中，您将 value 变量（实际上是您正在迭代的元素）更改为您想要的字符串，然后尝试更改 btnMain 的文本。这是错误的，据我了解， btnMain 是一个由两个元素组成的数组，您无法更改它的文本。您应该更改元素的值（您正在调用值）。应该是这样的

$.each(btnMain, function(index, element){
    // I think this is the time you want to define the btnParent, relative to the element
    var btnParent = element.parent('ul').prev('li').text();
    var value = (btnText + btnParent + 'Products');       
    element.text(value);
}

我认为这就是您所需要的。 您也可以将两个部分合并为一个，因为两者都在 btnMain 上进行迭代