使用 jQuery 获取链接文本（如果有）或图像的 id（如果是图像链接）

Question

我想使用 jQuery 来确定链接是文本链接还是图像链接。如果是文本链接，我想抓取文本。如果是图片链接，我想获取图片的 id。我尝试将 .text() 用于文本链接，但这也为我的图像链接返回 true。

function get_link_content(object) {

            if($(object).text()) {
                var link_content = $(object).text();
            }
// even if it's an image link, this ^^ always returns true
            else if($(object).find('img')) {
                if($(object).find('img').attr('id')) {
                    var link_content = $(object).find('img').attr('id');
                }
                else {
                    var link_content = 'unidentified';
                }
            }

            return link_content;
        }

通过文本链接，我的意思是：

<a href="#">This is a text link</a>

通过图片链接，我的意思是：

 <a href="#"><img id="the-id" src="#"></a>

除了 .text() 之外，我还应该使用其他方法吗？

Answer 1

if( $('img', $(object)).length ){
//object has a img as child
}
else{
//object doesnt have
}

或

var myText = $('img', $(object)).length ? $('img', $(object)).attr('id') 
             : $(object).text();

或作为函数

function get_link_content(object) {
    return $('img', $(object)).length ? $('img', $(object)).attr('id') 
                 : $(object).text();
}

或

return ( $('img', $(object)) && $('img', $(object)).attr('id') ) || $(object).text();

从@undefined 的建议中将所有长度更改为 has()，然后在阅读 'has()' 的文档后恢复为长度：P

Answer 2

以下是您的代码经过清理和略微优化的版本：

function get_link_content(object) {
  var $object = $(object), // Cache the element for faster execution
      $img = $object.find('img'),
      link_content,
      id;

  if (!$img.length) { // Does the object element not have an image?
    link_content = $object.text();
  } else {
    id = $img.attr('id'); // Get the image ID (if it exist)

    if (id.length) { // Was there an ID?
      link_content = id;
    } else {
      link_content = 'unidentified';
    }
  }

  return link_content;
}

编辑：这是一个进一步优化的版本（传递了一个 jQuery 元素）。

function get_link_content($object) {
  var $img = $object.find('img'),
      link_content;

  if (!$img.length) { // Does the object element not have an image?
    link_content = $object.text();
  } else {
    link_content = $img.attr('id'); // Get the image ID (if it exist)

    if (!link_content.length) { // Was there no ID?
      link_content = 'unidentified';
    }
  }

  return link_content;
}

如您所见，我删除了id，因为无论如何它都要存储在link_content 中（如果id 存在并且有值）。这意味着它在遇到具有id 的图像时会稍微快一些，因为它不必将id 值分配给变量id，然后将id 分配给link_element。如果有值，请执行步骤。它也比第一个版本短一些，这增加了一点可读性。

Answer 3

function get_link_content(e) {
        if($(e).find('img').length != 0) {
            if($(e).find('img').attr('id')) {
                var link_content = $(e).find('img').attr('id');
            } else {
                var link_content = 'unidentified';
            }
        } else {
            var link_content = $(object).text();
        }
        return link_content;
    }

$(object).find('img') - 这将始终返回 jQuery 对象，并且 object 始终为 true。要检查 jQuery 是否找到了某些元素，您应该使用 length 属性。

顺便说一句：$(e).find('img').attr('id') - 多次这样做并不是最好的方法。最好一次性获取值，然后放入某个临时变量中。

Answer 4

function get_link_content(object) {
    var link_content = 'unidentified';
    var $img = $(object).find('img');
    if(!$img.length){
      //no image found
      //get the text
      var $txt = $(object).text();
      if($txt.length){
          link_content = $txt;
      }
    }else{
      //there's an image
      link_content = $img.attr('id');
    }
    return link_content;
}

Answer 5

你可以使用jQuery对象的length属性：

var $obj = $(object);
if(!$obj.children().length) {
    var link_content = $obj.text();
} else {
    var link_content = $('img', $obj).attr('id');
    // ...
}

_{注意可以缓存$(object)而不是多次制作jQuery对象。}