Question

我是编程新手，并试图更好地理解jQuery函数的工作原理。有人可以用伪代码向我解释这段代码吗？此外，2个空格的格式是正确的还是更常见的是使用4？

＆＃13;

 $('#RemoveLastAuthor').click(function(e){
   $('.author-remove-group').last().prev('.form-group').remove();
   $('.author-remove-group').last().remove();
   if (num != 2){
     num--;
   }
  });

＆＃13;

Answer 1

如果您在团队中工作，您应该遵循关于缩进的编码标准，如果您单独工作，那么您应该这样做，哪些更适合您。我更喜欢4个空格（没有标签），但这首先取决于你。

下面的代码执行此操作（逐字而非伪代码）：

选择标识为RemoveLastAuthor的元素并将单击处理程序绑定到该元素（单击该元素时，将调用该函数）。

$('#RemoveLastAuthor').click(function(e){

然后选择类author-remove-group

的所有元素

$('.author-remove-group')

从中选择最后一个子元素：

.last()

然后，从所有这些（最后）元素中选择前一个元素，但仅当它具有类form-group

时

.prev('.form-group')

然后从DOM中删除这些元素：

.remove();

接下来，选择课程为author-remove-group的所有元素：

$('.author-remove-group')

然后从每个元素中选择最后一个子元素：

.last()

并从DOM中删除这些元素：

.remove();

所以我假设，这个回调从作者列表中删除了最后一个作者。如果你有HTML代码，那么更容易确定元素。这是一个不错的选择，每个查询只选择一个元素，但基本上jQuery可以选择并处理多个元素。

希望有所帮助

Answer 2

这不是伪代码，但我会尝试解释它对注释的作用：

//On clicking event of the element with id 'RemoveLastAuthor' run the anonymous function
    $('#RemoveLastAuthor').click(function(e){
              //Select all the elements with the css class 'author-remove-group', get the last item and then get the immediately preceding element with the class 'form-group' and remove it.
              $('.author-remove-group').last().prev('.form-group').remove();
              //Remove the last item found with the class 'author-remove-group'                  
              $('.author-remove-group').last().remove();
                   if (num != 2){
                     num--;
                   }
});

请查看文档：

.prev()

.last()

.remove()

Answer 3

insertBefore

好的，你可以看到我编写代码的行来解释它的行是什么，所以我们走吧！这是使用JQuery的JS JQuery只是JavaScript的库/扩展

首先：＆＃34; $（）＆＃34;是一个JQuery选择器
线：
1;您正在从您的html中选择一个ID为＆＃34; RemoveLastAuthor＆＃34;并为其指定一个单击事件处理程序，以便在单击它时将调用.click（）方法括号内的函数。

$html = <<<HTML
<p>Lorem</p>
<p>Ipsum...</p>
<li class='item'>...</li>
<li class='item'>...</li>
<li class='item'>...</li>
<div>...</div>
HTML;
$doc = new DOMDocument();
$doc->loadHTML($html);

$xpath = new DOMXpath($doc);

$elements = $xpath->query('//li[@class="item"]');

$wrapper = $doc->createElement('ul');
$elements->item(0)->parentNode->insertBefore(
    $wrapper, $elements->item(0)
);

foreach($elements as $child) {
    $wrapper->appendChild($child);
}

echo $doc->saveHTML();

2;因此，当调用该事件函数时，会发生以下情况

使用JQuery Selector选择一个CLASS为＆＃34; author-remove-group＆＃34;
选择该对象后，您将访问一个返回所选元素中最后一个DOM元素的方法。
然后使用.prev（＆＃39; .form-group＆＃39;）你得到的前一个元素是由＆＃34; form-group＆＃34;的类选择器过滤的。自下而上。
最后在此行中删除文档中的元素

3;您应该了解这一行的作用，除了从下到上找到前一个元素，现在它选择最后一个元素并删除它

4;不要问我从哪里得到变量num但是检查它是否不等于2

5;如果num不等于2

，则递减num

6;关闭if语句的大括号
7;关闭事件函数和JQuery Selector方法的花括号和括号

1; $('#RemoveLastAuthor').click(function(e){
2;    $('.author-remove-group').last().prev('.form-group').remove();
3;    $('.author-remove-group').last().remove();
4;    if (num != 2){
5;      num--;
6;    }
7; });

现在我将重新编写JQuery代码段，以便更容易理解

function(e){
    //this function is called when the element with the id of RemoveLastAuthor is clicked
}

我希望我的书可以帮助您理解JQuery的一些内容，如果您希望我通过选择我能做到的DOM元素来重新编写常规JS等特定语言的代码片段。

它更常见的是使用4个空格或实际的TAB字符 - 但它的JavaScript是模块化和可破解的，这就是它的美丽。

如果您需要任何澄清，请随时评论
编辑：JQuery API文档大多数时候都是真正的救星。

干杯，
Demetry

伪代码中的这个jQuery函数是什么？

3 个答案: