JQuery:选择具有唯一类和ID的元素

Don*_*tis 2 html javascript css jquery class

我有这个HTML代码:

<div class="category" id="154"> Category </div>

<div class="category2" id="156"> Category2 </div>

<div class="category3" id="157"> Category3 </div>

<div class="category4" id="158"> Category4 </div>
<input type="text" />
Run Code Online (Sandbox Code Playgroud)

因此,在示例中,如果我在文本框中编写id,如何选择具有此ID的div .category并获取内部HTML文本.用jQuery

mus*_*fan 7

所以你只需要使用ID,因为这是一个唯一的值(或应该是)

var html = $("#154").html();
Run Code Online (Sandbox Code Playgroud)

注意:如果您确实使用了重复的ID值,那么请务必注意JQuery只会选择第一个.


如果要在输入文本框值时执行此操作,可以在文本框更改事件上执行此操作...

$("input").change(function(){
   var id = $(this).val();
   var element = $("#" + id);
   if(element){
      var html = element.html();
      //do something with html here
   }
});
Run Code Online (Sandbox Code Playgroud)

注意:您可能希望在文本框中放置ID值以确保获得正确的控制


虽然我强烈建议您找到使用重复ID值的方法,但您可以使用这样的函数来获取您想要的DIV ...

function GetContent(className, id) {
    var result = null;
    var matchingDivs = $("." + className);
    matchingDivs.each(function(index) {
        var div = $(matchingDivs[index]);
        if (div.attr("id") == id) {
            result = div.html();
        }
    });

    return result;
}
Run Code Online (Sandbox Code Playgroud)

点击此处查看工作示例

  • @Donatas:重复ID在HTML中无效.有一些方法可以实现您想要的效果,但如果您创建有效的HTML,那么整体效果会更好. (2认同)