从按钮属性中选择自定义标签

Question

I have created a button element structure like below

<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
>

Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.

The snippets I have used to find is as below

jQuery("mycustomtag").each(function(){
    //process here
});

PS this works fine in the following case:

<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>

Answer 1

your code

jQuery("mycustomtag")

will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?

try following

 //if you want to get values var value = $("#btnCustom").attr("value"); var title = $("#btnCustom").attr("title"); alert(value); alert(title); //if you want to set values $("#btnCustom").attr("value","replacevalue"); $("#btnCustom").attr("title","replace value 2"); value = $("#btnCustom").attr("value"); title = $("#btnCustom").attr("title"); alert(value); alert(title); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>" id="btnCustom" > 

Answer 2

You couldn't find them since the value of an attribute is considered just like a string .

To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop() , like :

$('input').each(function() {
   $(this).val();
   $(this).prop('title');
});

PS this works fine in the following case

That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.

 $('input').each(function() { console.log($(this).val()); console.log($(this).prop('title')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>"> 

Answer 3

In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.

To select an element based on its value, use the following syntax:

$("input[value='<mycustomtag data-id=15>'")

To select an element based on its title works similarly.

Answer 4

If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span .

So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.

jQuery("input").attr("title");
jQuery("input").val();

Demo:

 console.log(jQuery("input").attr("title")); console.log(jQuery("input").val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>" >