进行动态选择的jQuery

Question

我有jQuery的脚本（2.1.4）谁一个按钮添加到特定块
例子：

<div class="dr_ing_list"> 
    <?php 
     $ingredients=explode(';', $donnee['ingredients']); 
     foreach ($ingredients as $value) { 
      echo "<p>".$value."</p></br>"; 
     } 
    ?> 
</div> 
<div class="dr_met_list"> 
    <?php 
     $methode=explode(';', $donnee['methode']); 
     foreach ($methode as $value) { 
      echo "<p>".$value."</p></br>"; 
     } 
    ?> 
</div> 

我得到的每类股利为做一个动态选择，但我有一个错误：
未捕获的错误：语法错误，无法识别的表情： “.dr_ing_list p：上”

这里是我的jQuery脚本：

var block_button = 0; 
 
$(".fa-lg").click(function(e){ 
 
    e.preventDefault; 
 
    var categorie = $(this).parent().attr('class'); 
 
    var selector = categorie+' p:last'; 
 
    selector = '".'+selector+'"'; 
 
    alert(selector); 
 
    $(selector).after("<button class='cta' type='button'>Valider les modifications</button>"); 
 
});

p{ 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom:10px; 
 
} 
 

 
.dr_met_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

我的错误在哪里？由于

Answer 1

你的错误是在这一行：

selector = '".'+selector+'"'; 

更改它到：

selector = '.'+selector; 

为什么？在第一种情况下的选择器是一个包含字符串：dr_ing_list P “ ”：最后一个“”代替它必须是：“.dr_ing_list p：上”（双引号）。

的片段：

var block_button = 0; 
 
$(".fa-lg").click(function(e){ 
 
    e.preventDefault; 
 
    var categorie = $(this).parent().attr('class'); 
 
    var selector = categorie+' p:last'; 
 
    selector = '.'+selector; 
 
    console.log(selector); 
 
    $(selector).after("<button class='cta' type='button'>Valider les modifications</button>"); 
 
});

p{ 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom:10px; 
 
} 
 

 
.dr_met_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

减小的代码的形式可以是：

• nextAll：获取每个元素的所有后面的兄弟姐妹中匹配的元素集合的，可以通过选择器进行过滤。
• ：这样你可以避免写HTML作为字符串，避免这样的潜在错误

因此，新的片段是：

var block_button = 0; 
 
$(".fa-lg").click(function (e) { 
 
    e.preventDefault; 
 
    $(this).nextAll('p:last').after($('<button/>', { 
 
    class: 'cta', 
 
    type: 'button', 
 
    text: 'Valider les modifications' 
 
    })); 
 
});

p { 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.dr_met_list { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

Answer 2

你结束了太多的引号

尝试改变

selector = '".'+selector+'"'; 

要

selector = '.'+ selector;