jQuery 使用元素 ID 作为函数的参数作为选择器

Question

我有这个功能

function doSomething(elementID) {

    $("div").append("<p id='"+ elementID +"'> A paragraph</p>");

    /* this part is incorrect since it will 
       use the selector whose id is "elementID" and not the parameter passed. */

    $("p#elementID").css("color", "red");
}

我想做这样的事情，但这显然是不正确的。如何使用 ID 参数来使用或存储选择器？

类似这样的东西(但这也是不正确的):

var x = $("# '"+elementID+");

Answer 1

有两种方法可以做到这一点。第一种是使用字符串连接 - 正如您在创建元素时所做的那样:

function doSomething(elementID) {
  $('div').append('<p id="' + elementID + '"> A paragraph</p>');
  $('p#' + elementID).css('color', 'red');
}

第二个，也是更可取的 IMO，是保留对您创建的元素的引用，然后在第二个语句中使用 appendTo():

function doSomething(elementID) {
  $('<p id="' + elementID + '"> A paragraph</p>').css('color', 'red').appendTo('div');
}

另请注意，最好使用 CSS 类来设置元素的 color。应尽可能避免使用 css()，因为它将 UI 和 JS 代码联系得太紧密。